{"componentChunkName":"component---src-pages-index-js","path":"/","webpackCompilationHash":"b774d4e4bfb73b5f1999","result":{"data":{"allMdx":{"edges":[{"node":{"excerpt":"万万没想到这篇文章居然还能写个二。MIUI 12.5 发布的时候增加了一个四姑娘山的超级壁纸，看腻了之前的超级火星，这次这个比较清新，过了很久还是忍不住又鼓捣着玩起来了。 上篇（ 🌏 把 MIUI 12 的超级壁纸搬到 Web 上 ）说了很多的东西，这里不再赘述，只是一些不一样的地方。 一、结果放到前面 预览可戳(17MB…","id":"34b0486c-91a6-5057-9a65-f422452478b9","fields":{"title":"🗻 把 MIUI 12 的超级雪山搬到 Web 上（二）","slug":"/blog/move-miui-12-super-wallpaper-to-web-2","date":"2021-01-13","datetime":"2021-01-13 15:55:36","description":"万万没想到这篇文章居然还能写个二。MIUI 12.5 发布的时候增加了一个四姑娘山的超级壁纸，看腻了之前的超级火星，这次这个比较清新，过了很久还是忍不住又鼓捣着玩起来了。","categories":["code"],"keywords":["Three.js","3D","Mars"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🗻 把 MIUI 12 的超级雪山搬到 Web 上（二）","date":"2021-01-13 15:55:36","description":"万万没想到这篇文章居然还能写个二。MIUI 12.5 发布的时候增加了一个四姑娘山的超级壁纸，看腻了之前的超级火星，这次这个比较清新，过了很久还是忍不住又鼓捣着玩起来了。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsSAAALEgHS3X78AAABrElEQVQY0y2RW08TYRCGl263B3ZpcEtbekC2B4qFQoFFYyVo5SNStlJsiRwC1JAAHm4kMWiiEBFjTLxQCMYQQ8KdMV7zE/hfjx8bLt68ySTzzMw7ikfVULUAXr+Bx6cTT2ZZnV+kw0yiBMK0h3sxIlm09k58wRCaHiY/KihPLVC8XeXmYIWCXaV4x+GWdKVNAj1evwTqEmggHq3w7fCYvXf7TFRqmIl+F9rmUVEU5aqBkYk69eVXTD9eJ1sS3BNLOM0tbFlXVK8PLaBLGQQ7TMxYmpIt2Nze5fzsgtbGW7yhBJFIlKBfc6GlyTmOvx5QnVsnPiB42nrOWmubnF1DSSR7sDI5EimLHqsPKzdAX2EM4Txjdn6T8bIjT84Qj6VYbS7SFbNYkn7555zTj5+JFqb4ubvDv5MT6isvUEbtcYZHbIZKNtn8IJn8EPdFTU5f5uHME8oVh+500d0sl+kn1Bnjzc4+R0d/+f39F5OiwUJ1jb2DUw6//LjOUD5FlQ/RZOg+3SQQikp1E7yRwuhKu7rK2c1Qarb5kg+fzmi03lO4W0ftfcDY9Aai8Zr/xPbAj6OcHvkAAAAASUVORK5CYII=","aspectRatio":3.103448275862069,"src":"/static/1e6793d9a90962816754740b6fb313b1/3c17d/banner2.png","srcSet":"/static/1e6793d9a90962816754740b6fb313b1/e0491/banner2.png 180w,\n/static/1e6793d9a90962816754740b6fb313b1/f4094/banner2.png 360w,\n/static/1e6793d9a90962816754740b6fb313b1/3c17d/banner2.png 720w,\n/static/1e6793d9a90962816754740b6fb313b1/05d05/banner2.png 1080w,\n/static/1e6793d9a90962816754740b6fb313b1/3bf79/banner2.png 1440w,\n/static/1e6793d9a90962816754740b6fb313b1/fde19/banner2.png 2510w","sizes":"(max-width: 720px) 100vw, 720px"}}},"keywords":["Three.js","3D","Mars"]}}},{"node":{"excerpt":"PS: 跨域警告是浏览器安全的很重要机制，代理和转发服务对于服务提供者是异常访问行为，如果对目的服务器故意隐藏来源也是一种非法行为。所以虽然没有法律明确，但是需要遵循不能大规模流量劫持，不能从事非法活动，必须添加  Origin  或者  X-Requested-With…","id":"e4f720a3-106f-5fec-b785-dc532b520aa8","fields":{"title":"🌈 跨域任意门","slug":"/blog/core-anywhere","date":"2020-12-17","datetime":"2020-12-17 00:17:36","description":"很多时候的小的个人项目需要一些数据，开发阶段只需要很少的请求别人的数据，也不值当收集或者搭建服务，就想着直接从客户端请求，但是大部分的服务都有跨域问题，常见的解决方案是服务器代理一下，今天把这种方案整理一下，做的全面一些方便使用。","categories":["code"],"keywords":["前端","整理"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🌈 跨域任意门","date":"2020-12-17 00:17:36","description":"很多时候的小的个人项目需要一些数据，开发阶段只需要很少的请求别人的数据，也不值当收集或者搭建服务，就想着直接从客户端请求，但是大部分的服务都有跨域问题，常见的解决方案是服务器代理一下，今天把这种方案整理一下，做的全面一些方便使用。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAT/xAAVAQEBAAAAAAAAAAAAAAAAAAABBP/aAAwDAQACEAMQAAABqoJmEJ//xAAZEAEAAgMAAAAAAAAAAAAAAAABAAMCESH/2gAIAQEAAQUCxrI9Gs3/AP/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAgBAgEBPwFtf//EABYQAAMAAAAAAAAAAAAAAAAAAAAQEf/aAAgBAQAGPwIi/8QAGBABAQEBAQAAAAAAAAAAAAAAAQARITH/2gAIAQEAAT8h2icyHswiT//aAAwDAQACAAMAAAAQeB//xAAXEQADAQAAAAAAAAAAAAAAAAAAAREh/9oACAEDAQE/EEsIf//EABYRAQEBAAAAAAAAAAAAAAAAAAEAYf/aAAgBAgEBPxBVtr//xAAYEAEBAQEBAAAAAAAAAAAAAAABEQAhcf/aAAgBAQABPxBgVLkzJQeQzMG+m//Z","aspectRatio":4.390243902439025,"src":"/static/a0a9b6c2d71bc1b167824a17c016c73e/7d509/banner.jpg","srcSet":"/static/a0a9b6c2d71bc1b167824a17c016c73e/8d052/banner.jpg 180w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/e2788/banner.jpg 360w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/7d509/banner.jpg 720w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/10d63/banner.jpg 1080w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/7f945/banner.jpg 1440w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/d8255/banner.jpg 1920w","sizes":"(max-width: 720px) 100vw, 720px"}}},"keywords":["前端","整理"]}}},{"node":{"excerpt":"PS: 建议配合上篇文章食用  📦 实现一个简单朴素的 react 数据管理层 NOVUS PS 2 : 有意思的点： Novus 版本的 Fiber，喘息机制 ， 自动收集订阅依赖问题 ， 完善的测试 PS…","id":"6e76bc7f-404f-5cff-a765-b62c0f8044a7","fields":{"title":"📦 改进一个简单朴素的 react 数据管理层 NOVUS","slug":"/blog/novus-2","date":"2020-10-17","datetime":"2020-10-17 22:50:20","description":"上次造的轮子在好几个项目中落地，因为造的有点仓促，只顾了几个痛点，很多没有考虑周到的地方在实践的时候暴露出来，这里记录下中间改进的地方。","categories":["code"],"keywords":["整理","思考","功能","NOVUS","状态管理"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"📦 改进一个简单朴素的 react 数据管理层 NOVUS","date":"2020-10-17 22:50:20","description":"上次造的轮子在好几个项目中落地，因为造的有点仓促，只顾了几个痛点，很多没有考虑周到的地方在实践的时候暴露出来，这里记录下中间改进的地方。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAIAAACHqfpvAAAACXBIWXMAAAsSAAALEgHS3X78AAAA90lEQVQY021R204FIQzkP3SXa2kL7ALu5mjigw/+/z85Z4+JmjiQ0rR0pgUTQvTO5UycLxDlDJedc+uFZVkik9RCRN7j7jesc8YN9S2nTdPR0kuNs5ZDmfy6WhTCLE/PoZfz4/08Ti0lxpgAIhzGdQ1ve1LUS5o1zRIrOQte5y84LOvatrFICOHR0XLB2CG+C+rjJmADMdLoUESYWRU2Q6e0qgrhIgipQttaa/Q25XXS5422Ao1wFT96gw8pEMHRVoHyswtS5hxH76P1TZlXa9e/sFcEdGPOfe/McicNAeMgbvLAOzVLQjoo37u1/1FkZnzD74HhfAHm5jyES2JEdAAAAABJRU5ErkJggg==","aspectRatio":2.8125,"src":"/static/fca957b9be8350ac79ddfe25ec32c595/3c17d/banner.png","srcSet":"/static/fca957b9be8350ac79ddfe25ec32c595/e0491/banner.png 180w,\n/static/fca957b9be8350ac79ddfe25ec32c595/f4094/banner.png 360w,\n/static/fca957b9be8350ac79ddfe25ec32c595/3c17d/banner.png 720w,\n/static/fca957b9be8350ac79ddfe25ec32c595/05d05/banner.png 1080w,\n/static/fca957b9be8350ac79ddfe25ec32c595/ab46c/banner.png 1369w","sizes":"(max-width: 720px) 100vw, 720px"}}},"keywords":["整理","思考","功能","NOVUS","状态管理"]}}},{"node":{"excerpt":"ubug.io 这个域名是在几年前申请的，一直续费用着，主要的一个原因是很简洁，所以有时候会想用这个域名做一个短链接服务。 今天终于把这个想法从 TODO List 拿出来思考并实现出来了。 这是地址： 短链服务 开发的过程太顺利，挺有意思，所以在此记录下整个实现，流水账很罗嗦，技术也不复杂，推荐扫一眼即可。 一、目标和需求 正常的短链服务一般用来做网址缩短，比长段的 URL…","id":"1d0405e0-5609-5629-8c87-9ee1c05341ff","fields":{"title":"🔗 30 分钟创建一个短链服务 ","slug":"/blog/short-url-service-in-30-minutes","date":"2020-09-18","datetime":"2020-09-18 12:23:35","description":"“域名很简练，如果用来做短链服务的话应该挺有意思” 这个想法一直存在，决定要做之后发现还是挺容易实现的，过程很有意思。","categories":["code"],"keywords":["短链","Baas"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🔗 30 分钟创建一个短链服务 ","date":"2020-09-18 12:23:35","description":"“域名很简练，如果用来做短链服务的话应该挺有意思” 这个想法一直存在，决定要做之后发现还是挺容易实现的，过程很有意思。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAjElEQVQY052QSw6DMAxEuf8N2bClqC0t4DhfMo2NgtoNUmNplLElP03c4atyzudrnVc5H0DGYllJvczYOqSUfnZqdVdAw1Zhj/mN6T4ffVEbsCxtxHi+FpUkJMMK8yVp/Ae47xkhRO3F16pe0sWWLx83dLhNhGFYS2/PGzYBZTFEj3Fk9P2mXmZXN/wA3xrYup9WGI0AAAAASUVORK5CYII=","aspectRatio":3.3962264150943398,"src":"/static/abac10aa1271ddc100a766e57da44f0c/3c17d/banner.png","srcSet":"/static/abac10aa1271ddc100a766e57da44f0c/e0491/banner.png 180w,\n/static/abac10aa1271ddc100a766e57da44f0c/f4094/banner.png 360w,\n/static/abac10aa1271ddc100a766e57da44f0c/3c17d/banner.png 720w,\n/static/abac10aa1271ddc100a766e57da44f0c/05d05/banner.png 1080w,\n/static/abac10aa1271ddc100a766e57da44f0c/db253/banner.png 1403w","sizes":"(max-width: 720px) 100vw, 720px"}}},"keywords":["短链","Baas"]}}},{"node":{"excerpt":"IOS 上的背景模糊效果真的非常的惊艳，从 CSS backdrop-filter 这个属性可用以来就实验性的玩过，除了兼容性问题上硬伤(目前 86% 左右，尤其是国内 X5 内核等魔改内核（微信和很多 APP 内置的浏览器）)，效果还是很不错的。 一、什么是亚克力 前两天又看到了微软的 Fluent Design，Fluent Design System…","id":"4a2d7370-372d-5cb9-b2df-767c2c2b796a","fields":{"title":"🐏 Web 实现 Fluent UI 的 Acrylic 亚克力效果和组件库的能力","slug":"/blog/fluent-acrylic","date":"2020-08-05","datetime":"2020-08-05 19:18:10","description":"CSS 的能力已经很强大了，前两天看到了微软的 FluentDesign，尝试用 CSS 实现下。","categories":["code"],"keywords":["css","acrylic","UI-Library"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🐏 Web 实现 Fluent UI 的 Acrylic 亚克力效果和组件库的能力","date":"2020-08-05 19:18:10","description":"CSS 的能力已经很强大了，前两天看到了微软的 FluentDesign，尝试用 CSS 实现下。","banner":null,"keywords":["css","acrylic","UI-Library"]}}},{"node":{"excerpt":"〇、背景 Node.js 是一个了不起的应用，将 JavaScript 这个偏居一隅的脚本，变成了领域边界非常广阔的应用语言，就这一点来说怎么夸赞都不为过。 前些年 Node.js 在仅有的 ES 标准下发展壮大，不过近些年随着 ES 标准的演进，TypeScript 的广泛应用，Node.js…","id":"3c09e5bb-1386-544b-863c-aa31fb34bcaa","fields":{"title":"🐍 新技术尝个鲜 - deno","slug":"/blog/deno-introduce","date":"2020-07-20","datetime":"2020-07-20 20:28:12","description":"Deno 刚发布的时候就关注到了，感觉还是很有前景的，面向未来，现在尝个鲜","categories":["code"],"keywords":["deno"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🐍 新技术尝个鲜 - deno","date":"2020-07-20 20:28:12","description":"Deno 刚发布的时候就关注到了，感觉还是很有前景的，面向未来，现在尝个鲜","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAzklEQVQoz52RTQ6CMBBGOZF7Eo4AJyHhGFyDI5C4Y0037FjhAvAEbQ3/lAL6pRrFSGL1bdpJ+jKdb4xpw6iYtDHuhxBinuerQkqJUlfG02VZqqo6Kuq6XtdVKrQ6o63rugeF53l93zdN03XdFxlD4qtJkjiOQwjxfR8+ieMsO5XlWXwyvSYyUELO89yyLJhpmpqmWRZF27aMM875hXNKKS6MMUrZNtHHzPCDILBtO4qiMAxRDsMg9tiZGUBAVOiAtH5b1XNbiF1zT2/yH9wA6/gqrPvNUiAAAAAASUVORK5CYII=","aspectRatio":2.0454545454545454,"src":"/static/6ecc1d3a3f78edafaddd14a519392e6f/3c17d/banner.png","srcSet":"/static/6ecc1d3a3f78edafaddd14a519392e6f/e0491/banner.png 180w,\n/static/6ecc1d3a3f78edafaddd14a519392e6f/f4094/banner.png 360w,\n/static/6ecc1d3a3f78edafaddd14a519392e6f/3c17d/banner.png 720w,\n/static/6ecc1d3a3f78edafaddd14a519392e6f/05d05/banner.png 1080w,\n/static/6ecc1d3a3f78edafaddd14a519392e6f/38ba5/banner.png 1108w","sizes":"(max-width: 720px) 100vw, 720px"}}},"keywords":["deno"]}}},{"node":{"excerpt":"…","id":"9174c8ac-9613-5060-bd26-ca99b5f38d19","fields":{"title":"💒 结婚撸个相册 🎈🎉💖💗💕💘","slug":"/blog/marry","date":"2020-07-10","datetime":"2020-07-10 20:08:10","description":"看到自己的爱人穿上婚纱的样子，心里藏不住的开心","categories":["think"],"keywords":["美好"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"💒 结婚撸个相册 🎈🎉💖💗💕💘","date":"2020-07-10 20:08:10","description":"看到自己的爱人穿上婚纱的样子，心里藏不住的开心","banner":{"childImageSharp":{"sizes":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAGABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAIEBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAC/9oADAMBAAIQAxAAAAHIsBAVP//EABkQAAEFAAAAAAAAAAAAAAAAAAIAARITMv/aAAgBAQABBQIMDGp1/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAGxABAAAHAAAAAAAAAAAAAAAAAQACEBEhQXH/2gAIAQEABj8CSxmJTfKf/8QAGxAAAQQDAAAAAAAAAAAAAAAAAQARIUExUXH/2gAIAQEAAT8hLNNjSI2F3ghEcX//2gAMAwEAAgADAAAAEAA//8QAFhEAAwAAAAAAAAAAAAAAAAAAARAx/9oACAEDAQE/EBV//8QAFhEBAQEAAAAAAAAAAAAAAAAAABFB/9oACAECAQE/EMV//8QAGxAAAwEAAwEAAAAAAAAAAAAAAREhAEFRYcH/2gAIAQEAAT8QV4hqnWasAvDlFtnByBRJQX3f/9k=","aspectRatio":3.103448275862069,"src":"/static/6701d75556a4650d2381158d8d4b0b71/7d509/banner.jpg","srcSet":"/static/6701d75556a4650d2381158d8d4b0b71/8d052/banner.jpg 180w,\n/static/6701d75556a4650d2381158d8d4b0b71/e2788/banner.jpg 360w,\n/static/6701d75556a4650d2381158d8d4b0b71/7d509/banner.jpg 720w,\n/static/6701d75556a4650d2381158d8d4b0b71/10d63/banner.jpg 1080w,\n/static/6701d75556a4650d2381158d8d4b0b71/7f945/banner.jpg 1440w,\n/static/6701d75556a4650d2381158d8d4b0b71/c6d81/banner.jpg 2510w","sizes":"(max-width: 720px) 100vw, 720px"}}},"keywords":["美好"]}}},{"node":{"excerpt":"当初 MIUI 12 发布时，超级壁纸功能着实看起来特别的有感觉，之前已经申请开发版内测，第一时间体验下来整个桌面到息屏的动画流畅，最后手机息屏之后一个火星在屏幕上还是挺震撼的。 这几天瞥到宣传图突发奇想，不就是个3D球吗？WEB 上好像也能实现，要不试试？ 预览可戳(16MB…","id":"e0c6273b-794b-58dd-a13b-b10645b19c66","fields":{"title":"🌏 把 MIUI 12 的超级火星搬到 Web 上","slug":"/blog/move-miui-12-super-wallpaper-to-web","date":"2020-07-02","datetime":"2020-07-02 15:55:36","description":"当初 MIUI 12 发布时，超级壁纸功能着实看起来特别的有感觉，之前已经申请开发版内测，第一时间体验下来整个桌面到息屏的动画流畅，最后手机息屏之后一个火星在屏幕上还是挺震撼的。但，不就是个3D球吗！？","categories":["code"],"keywords":["Three.js","3D","Mars"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🌏 把 MIUI 12 的超级火星搬到 Web 上","date":"2020-07-02 15:55:36","description":"当初 MIUI 12 发布时，超级壁纸功能着实看起来特别的有感觉，之前已经申请开发版内测，第一时间体验下来整个桌面到息屏的动画流畅，最后手机息屏之后一个火星在屏幕上还是挺震撼的。但，不就是个3D球吗！？","banner":{"childImageSharp":{"sizes":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAGABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAEEBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHEkLQr/8QAFxABAQEBAAAAAAAAAAAAAAAAAQIRAP/aAAgBAQABBQKUl3hM/8QAFREBAQAAAAAAAAAAAAAAAAAAEBH/2gAIAQMBAT8Bp//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABYQAQEBAAAAAAAAAAAAAAAAAAAxEf/aAAgBAQAGPwKaiP/EABkQAQADAQEAAAAAAAAAAAAAAAEAESFhgf/aAAgBAQABPyG++CQA2Qg4zk//2gAMAwEAAgADAAAAEAQP/8QAFREBAQAAAAAAAAAAAAAAAAAAEBH/2gAIAQMBAT8Qo//EABYRAAMAAAAAAAAAAAAAAAAAAAEQEf/aAAgBAgEBPxCBf//EABoQAQEAAwEBAAAAAAAAAAAAAAERADFhIUH/2gAIAQEAAT8QEOEiJMeBdyr915zLKaIwt7n/2Q==","aspectRatio":3.103448275862069,"src":"/static/5ced1533e64532fcef1ef1fb54dbf043/7d509/banner.jpg","srcSet":"/static/5ced1533e64532fcef1ef1fb54dbf043/8d052/banner.jpg 180w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/e2788/banner.jpg 360w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/7d509/banner.jpg 720w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/10d63/banner.jpg 1080w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/7f945/banner.jpg 1440w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/c6d81/banner.jpg 2510w","sizes":"(max-width: 720px) 100vw, 720px"}}},"keywords":["Three.js","3D","Mars"]}}},{"node":{"excerpt":"当你想要排序的时候，肯定会需要用到 sort 方案，但是请切忌排序结果没问题，但是过程是一个黑盒。 问题 需求是随机获得 0-16 的数字组合，用处是来打乱一副牌，但是需要保证两人相同的随机过程。所以做了一个种子随机数，两个人实现同样的打乱过程，初步想法。 于是： 上面的程序在浏览器里面运行没问题，重复 n…","id":"ba8aa0d4-f276-5113-81a0-80bd51d7719d","fields":{"title":"🥧 一次意外的 Bug 竟然是因为它 ？！Array.sort 使用避坑","slug":"/blog/random-and-sort","date":"2020-06-15","datetime":"2020-06-15 20:08:10","description":"想要使用种子生成一个地图，然后遇到了一个很奇怪的问题，发现 sort 内部实现的黑盒~~~","categories":["code"],"keywords":["sort","random"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🥧 一次意外的 Bug 竟然是因为它 ？！Array.sort 使用避坑","date":"2020-06-15 20:08:10","description":"想要使用种子生成一个地图，然后遇到了一个很奇怪的问题，发现 sort 内部实现的黑盒~~~","banner":null,"keywords":["sort","random"]}}},{"node":{"excerpt":"…","id":"10d519f3-dd20-5e2a-8788-cc4c5c32c7d4","fields":{"title":"🙅‍ 持续集成和部署(CI 和 CD)","slug":"/blog/ci-cd","date":"2020-05-18","datetime":"2020-05-18 13:54:13","description":"持续集成是现代团队协作的基础建设了，一个成熟的团队肯定会搭建自己的整个持续集成和持续部署流程。","categories":["code"],"keywords":["持续集成","持续部署","前端"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🙅‍ 持续集成和部署(CI 和 CD)","date":"2020-05-18 13:54:13","description":"持续集成是现代团队协作的基础建设了，一个成熟的团队肯定会搭建自己的整个持续集成和持续部署流程。","banner":null,"keywords":["持续集成","持续部署","前端"]}}},{"node":{"excerpt":"想分享的是 serverless 的理解，保持眼界开阔，思考能力的价值，拥抱变化~~~ 一、什么是 serverless 无服务架构 听起来很高大上，火的不要不要的词，看了 n 篇文章也不知道是什么，都在说思想多好多好，什么 Faas、Baas、无服务化、云原生之类的词，看的更迷糊了。 其实： serverless…","id":"bf8e8a05-66d0-5a68-9862-6d68fb54c365","fields":{"title":"🌀 serverless 时代和云计算时代","slug":"/blog/serverless-and-cloud-compute","date":"2020-04-20","datetime":"2020-04-20 21:22:43","description":"serverless 就是不需要买/租服务器就能把程序运行起来。那程序放到哪？怎么触发？调用数据库怎么办？怎么写代码？怎么部署和运行？","categories":["code"],"keywords":["serverless"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🌀 serverless 时代和云计算时代","date":"2020-04-20 21:22:43","description":"serverless 就是不需要买/租服务器就能把程序运行起来。那程序放到哪？怎么触发？调用数据库怎么办？怎么写代码？怎么部署和运行？","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsSAAALEgHS3X78AAACVklEQVQozz3RyU9TURjG4f5HBhkqFFrae+mFImAZC7SWlMmqLZNtQQEjUYyEhcbohrULF0ZEZiHYMvXeW7SARHBITFy7caELY35+WOPi5DvJyXnyvudYbH6TsuAejlAWZ9c+zt4DnOEDysL7eGLvCU1/wR7NYu81qL5icqFvD23IRBkyUBMm6nWZ4zJvZVAnTCzFbQalgYygbygX1NUjWFeW9rHPPE3+Yi79m8ez3/DF9zh/yaApfoAWy6D066gxA2VYsBvmf9RyzpfmFLX5c6iz+4Dy7n0q/TvE737i+dYPkkc/id47lrM0nkGTyn4TV1TAQeMfKnNUwJuSsKhpl+JWHXswIwnfUi71tfYMNm0Rq/qSh0++8iz5Hf/IIe4eXSpnqImYaBFB+gU7ReOCjeRQi7V5h1K/1G7TcTRu4apNUu5ZRalZRK1bIHbnkM7EPookruhIo4Z28Yb3aBjIokaNXPWhHKrIe1oK6rcoqt6gRi4EIlkq65MUq3O03jjBH3+H1pTC3ZpGC+hoHTruUJqKLtmHBQjrKJFTVNa13CdZzpYtUliyQKm6ilafoqohheZNUdG4SZVPpy5gMPXoIxP3j5l4cMzUzAfi00dMzpxQHRX86i7uAUk+qP9FLXmFL8gvnqfAtoDVvoRDW6PSm0SV6o5qwZtTBAbW6Bhe4mJiFX9ineDYKp23l/GNrtAyvoJ/cgHv6AauAUl4pmCWPOsc+SXzFEpaq2OZEuUVNvc6ds9rnLWbKN5N1KZt1JZtlNYd1ICsoLxppyTsSeO+LFPSKn0GfwB+88AjU9DHMQAAAABJRU5ErkJggg==","aspectRatio":2.2222222222222223,"src":"/static/63915122abea25dcad04ca23d30ff2a8/3c17d/banner.png","srcSet":"/static/63915122abea25dcad04ca23d30ff2a8/e0491/banner.png 180w,\n/static/63915122abea25dcad04ca23d30ff2a8/f4094/banner.png 360w,\n/static/63915122abea25dcad04ca23d30ff2a8/3c17d/banner.png 720w,\n/static/63915122abea25dcad04ca23d30ff2a8/05d05/banner.png 1080w,\n/static/63915122abea25dcad04ca23d30ff2a8/f3583/banner.png 1200w","sizes":"(max-width: 720px) 100vw, 720px"}}},"keywords":["serverless"]}}},{"node":{"excerpt":"想分享的是数据库相关的基本知识和 SQL 的相关概念，完备的回顾下相关能力，温故知新~~~ 刚开始写代码自学的时候，目的就是做网站，所以接触了很多的后台 PHP 和数据库相关的能力，工作中很长一段也承担了中间层和后台管理系统的搭建，所以可以说挺熟悉的。但是没有完备系统的整理过数据库的相关能力，平时 SQL…","id":"84c1815e-2a4c-5485-a8f3-b364b04f2169","fields":{"title":"📃 数据库和 SQL","slug":"/blog/database-and-sql","date":"2020-04-10","datetime":"2020-04-10 20:49:53","description":"数据库在日常开发中接触很多，其中的存储思想和方法对于数据和接口的理解大有裨益，虽然很多端侧开发可能不会直接接触，但是系统的了解下是很有必要的。","categories":["code"],"keywords":["SQL","整理","数据库"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"📃 数据库和 SQL","date":"2020-04-10 20:49:53","description":"数据库在日常开发中接触很多，其中的存储思想和方法对于数据和接口的理解大有裨益，虽然很多端侧开发可能不会直接接触，但是系统的了解下是很有必要的。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsSAAALEgHS3X78AAAAoUlEQVQY032RjQqFIAxGe/8nDVKzTNN+2OUMdol7K+HDObfjN+yO4xC077vknGVZFlnX9VW1VhVxa02MgbrrwXsvfd8rFKWUVBbzIKBpmiTGqDvQWyAO53mWYRi0Gfg4jtpEDielFIVSR96meQQCooAma7bRtm373lHP4hFy53neA3HknFN3phCC7oxoY+OOmBxngPT/Ad8+AsfoGqPfT/kAkcrSQp+LnvEAAAAASUVORK5CYII=","aspectRatio":3.4615384615384617,"src":"/static/b692ff0ef0c34954d59b28d424c27f5f/3c17d/banner.png","srcSet":"/static/b692ff0ef0c34954d59b28d424c27f5f/e0491/banner.png 180w,\n/static/b692ff0ef0c34954d59b28d424c27f5f/f4094/banner.png 360w,\n/static/b692ff0ef0c34954d59b28d424c27f5f/3c17d/banner.png 720w,\n/static/b692ff0ef0c34954d59b28d424c27f5f/05d05/banner.png 1080w,\n/static/b692ff0ef0c34954d59b28d424c27f5f/edcaf/banner.png 1269w","sizes":"(max-width: 720px) 100vw, 720px"}}},"keywords":["SQL","整理","数据库"]}}},{"node":{"excerpt":"想分享的是让你知道一个项目的初始化并不是必须要各种脚手架，只要你知道要什么和其中的配合，就很容易初始化需要的项目。…","id":"4c7ab814-dfec-51c5-aec6-9a77f5f27359","fields":{"title":"👌 简单 6 步从零开始配置 ts 和 react 环境","slug":"/blog/start-from-empty-to-ts-react","date":"2020-03-25","datetime":"2020-03-25 13:50:19","description":"工程化、脚手架等关键词，让现代人都忘了原始怎么从零开始了，怎么能搭建一个初始环境其实没有那么复杂，今天只用六步从零实现一下这个过程。","categories":["code"],"keywords":["功能","思考","最佳实践","babel","Webpack","ES6","TypeScript"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"👌 简单 6 步从零开始配置 ts 和 react 环境","date":"2020-03-25 13:50:19","description":"工程化、脚手架等关键词，让现代人都忘了原始怎么从零开始了，怎么能搭建一个初始环境其实没有那么复杂，今天只用六步从零实现一下这个过程。","banner":null,"keywords":["功能","思考","最佳实践","babel","Webpack","ES6","TypeScript"]}}},{"node":{"excerpt":"想分享的是只需要一点点的数学计算就能实现 Flutter 中不同 fitMode 的图片的 Hero 转换动画。 我们经常在很多 app 都见到过在列表页的小图，点击后小图连续的动画，变成大图展示在顶部，特别的流畅。这就是 flutter 里的 hero…","id":"baef9bba-6188-58ad-bdae-410f73a22091","fields":{"title":"🍻 flutter 在不同 fit 图片上的 hero 动画","slug":"/blog/flutter-hero-with-image-fit","date":"2020-03-19","datetime":"2020-03-19 17:38:57","description":"最简单的数学计算，实现不同 fitMode 图片的 hero 动画，避免出现动画割裂。 flutter hero 是个很酷的东西，经常在列表到详情切换中用到。","categories":["code"],"keywords":["功能","技巧","flutter"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🍻 flutter 在不同 fit 图片上的 hero 动画","date":"2020-03-19 17:38:57","description":"最简单的数学计算，实现不同 fitMode 图片的 hero 动画，避免出现动画割裂。 flutter hero 是个很酷的东西，经常在列表到详情切换中用到。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAIAAADKYVtkAAAACXBIWXMAAAsTAAALEwEAmpwYAAABOElEQVQY0zWPy0oCUQCGz5TQC+QTtGzTqh6gRRBtoo20jlxGm1p1hQqMaMTAQAoKUgxdREEULSK7ESpKgZKLbKaamryMHmfm3E9G9O0//u8HVcwKDrchdBFyXZcQwjkjBAnOGBdSyip0VpI3Y5F7EHhTgjWwBTtC9U71S1FNkLfw7rNlmZ+arpdKJcMwOKOQSBMJp15pWI3tR9R7AH2xYs/anTeQHZjd8a7mQAgq6jegmNg2opRijAnGiDCGbVa/in+0Eu88W65OJnUwU+zbM84L5onW9O2fDU0v9s/FujY00O6klPyBf5sJFzyRTsUvw9daJvgq/dHM0ulL08HtC1KIlpSb2fKwf6p7IQXIP+1hwciTiUaOaooKlXV9IhofDN+OH1+Q2qGUjPJfPZd+GJ2PeJbznlDlBzoL6nJadrmkAAAAAElFTkSuQmCC","aspectRatio":4,"src":"/static/b5540b62e5e351560b4a55e1a7a78026/3c17d/banner.png","srcSet":"/static/b5540b62e5e351560b4a55e1a7a78026/e0491/banner.png 180w,\n/static/b5540b62e5e351560b4a55e1a7a78026/f4094/banner.png 360w,\n/static/b5540b62e5e351560b4a55e1a7a78026/3c17d/banner.png 720w,\n/static/b5540b62e5e351560b4a55e1a7a78026/05d05/banner.png 1080w,\n/static/b5540b62e5e351560b4a55e1a7a78026/3bf79/banner.png 1440w,\n/static/b5540b62e5e351560b4a55e1a7a78026/5707d/banner.png 1600w","sizes":"(max-width: 720px) 100vw, 720px"}}},"keywords":["功能","技巧","flutter"]}}},{"node":{"excerpt":"想分享的是让你知道  flutter  开发中遇到的性能问题，和一些很容易的优化方法。 无论用什么语言开发应用的时候，性能和稳定性都是一个更高要求的方面，用 80% 的时间来拔高 20% 的效果。 这里因为业务的 APP…","id":"2bade5ec-7bf2-5705-9f57-60c086ef7a53","fields":{"title":"💊 flutter 性能优化","slug":"/blog/flutter-performance","date":"2020-03-10","datetime":"2020-03-10 19:32:51","description":"flutter 已经不算是新生的事物了，毫无疑问是一个非常优秀、很有前景的技术栈，但是并不能说生产环境里这个一个多么低门槛的完美解决方案。","categories":["code"],"keywords":["整理","性能优化","flutter","调试"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"💊 flutter 性能优化","date":"2020-03-10 19:32:51","description":"flutter 已经不算是新生的事物了，毫无疑问是一个非常优秀、很有前景的技术栈，但是并不能说生产环境里这个一个多么低门槛的完美解决方案。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAIAAADKYVtkAAAACXBIWXMAAAsTAAALEwEAmpwYAAABOElEQVQY0zWPy0oCUQCGz5TQC+QTtGzTqh6gRRBtoo20jlxGm1p1hQqMaMTAQAoKUgxdREEULSK7ESpKgZKLbKaamryMHmfm3E9G9O0//u8HVcwKDrchdBFyXZcQwjkjBAnOGBdSyip0VpI3Y5F7EHhTgjWwBTtC9U71S1FNkLfw7rNlmZ+arpdKJcMwOKOQSBMJp15pWI3tR9R7AH2xYs/anTeQHZjd8a7mQAgq6jegmNg2opRijAnGiDCGbVa/in+0Eu88W65OJnUwU+zbM84L5onW9O2fDU0v9s/FujY00O6klPyBf5sJFzyRTsUvw9daJvgq/dHM0ulL08HtC1KIlpSb2fKwf6p7IQXIP+1hwciTiUaOaooKlXV9IhofDN+OH1+Q2qGUjPJfPZd+GJ2PeJbznlDlBzoL6nJadrmkAAAAAElFTkSuQmCC","aspectRatio":4,"src":"/static/b5540b62e5e351560b4a55e1a7a78026/3c17d/banner.png","srcSet":"/static/b5540b62e5e351560b4a55e1a7a78026/e0491/banner.png 180w,\n/static/b5540b62e5e351560b4a55e1a7a78026/f4094/banner.png 360w,\n/static/b5540b62e5e351560b4a55e1a7a78026/3c17d/banner.png 720w,\n/static/b5540b62e5e351560b4a55e1a7a78026/05d05/banner.png 1080w,\n/static/b5540b62e5e351560b4a55e1a7a78026/3bf79/banner.png 1440w,\n/static/b5540b62e5e351560b4a55e1a7a78026/5707d/banner.png 1600w","sizes":"(max-width: 720px) 100vw, 720px"}}},"keywords":["整理","性能优化","flutter","调试"]}}},{"node":{"excerpt":"…","id":"b22adbcc-b61f-515b-8c61-d7562e7cf7e0","fields":{"title":"🚴‍♀️ 小公司的技术架构演进","slug":"/blog/technical-architecture-evolution-in-small-company","date":"2020-03-02","datetime":"2020-03-02 20:12:18","description":"不算实习也已经从业 5 年，在小公司见证了很多架构从零搭建起来，从零开始承接流量，这里分享下我眼里的大前端技术架构演进","categories":["think"],"keywords":["整理","思考","技术演进","flutter"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🚴‍♀️ 小公司的技术架构演进","date":"2020-03-02 20:12:18","description":"不算实习也已经从业 5 年，在小公司见证了很多架构从零搭建起来，从零开始承接流量，这里分享下我眼里的大前端技术架构演进","banner":null,"keywords":["整理","思考","技术演进","flutter"]}}},{"node":{"excerpt":"大部分的 React 开发是不需要考虑性能优化的，因为很多业务复杂度不需要这么苛刻的需求，常见的页面和交互都比较简单，展示型的组件除了长列表并没有太多性能问题。不过 React 这类框架生来就是能够搭建大型单页应用的，所以性能问题在这些应用级别的页面中还是很值得说道的。 好巧不巧，我在项目中就遇到了很多的性能问题， 🌋 WebIDE…","id":"df2155e3-6a18-5b8a-a408-49233149af4a","fields":{"title":"📊 React 实践技巧和性能优化","slug":"/blog/react-pratice-and-performance","date":"2020-02-24","datetime":"2020-02-24 20:24:36","description":"如今单单实现业务目标已经不够了，性能和体验是上层产品的基础，更加优质、体验更好的业务变得越来越重要。所以实现极致的性能、提升产品体验，是很值得追求的一件事情。","categories":["code"],"keywords":["react","hooks","pratice","performance","技巧","最佳实践","性能优化","思考","功能"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"📊 React 实践技巧和性能优化","date":"2020-02-24 20:24:36","description":"如今单单实现业务目标已经不够了，性能和体验是上层产品的基础，更加优质、体验更好的业务变得越来越重要。所以实现极致的性能、提升产品体验，是很值得追求的一件事情。","banner":null,"keywords":["react","hooks","pratice","performance","技巧","最佳实践","性能优化","思考","功能"]}}},{"node":{"excerpt":"1. Typescript…","id":"8653f63c-4482-5cfe-8b26-c5482c1a882d","fields":{"title":"🤔 技术背后隐含的思维方式","slug":"/blog/thinking-behind-tech","date":"2020-02-16","datetime":"2020-02-16 10:17:10","description":"很多技术的实现不是简单的解决某个场景，解决方案之后还有着不同的思考和思维方式，比如 Hooks、Flux、Fiber、TypeScript，这篇文章聊聊~~","categories":["think"],"keywords":["整理","思考","Typescript","ReactHooks","Fiber","Flux"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🤔 技术背后隐含的思维方式","date":"2020-02-16 10:17:10","description":"很多技术的实现不是简单的解决某个场景，解决方案之后还有着不同的思考和思维方式，比如 Hooks、Flux、Fiber、TypeScript，这篇文章聊聊~~","banner":null,"keywords":["整理","思考","Typescript","ReactHooks","Fiber","Flux"]}}},{"node":{"excerpt":"PS: 仓库和代码在最下面； PS 2 : 后续出现了一些问题和痛点，做了很多的改进：  📦 改进一个简单朴素的 react 数据管理层 NOVUS ，包括同步触发、初始化、自动依赖收集、“喘息机制”、Novus 版 Fiber 和测试，本篇重点说需求、基础功能和初步实现。 PS…","id":"d6dbc84a-b42a-5459-b53a-51d83b643a81","fields":{"title":"📦 实现一个简单朴素的 react 数据管理层 NOVUS","slug":"/blog/novus","date":"2020-02-07","datetime":"2020-02-07 22:50:20","description":"我喜欢的全局数据管理层只需要一个数据层，而不是各种范式、同步异步的需求，更不是没办法代码提示的各种 Action Type，尤其是没有 typescript 支持，不喜欢各种类型写好多次，不喜欢各种数据层概念，只想要实现一个简单朴素的数据管理工具","categories":["code"],"keywords":["整理","思考","功能","NOVUS","状态管理"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"📦 实现一个简单朴素的 react 数据管理层 NOVUS","date":"2020-02-07 22:50:20","description":"我喜欢的全局数据管理层只需要一个数据层，而不是各种范式、同步异步的需求，更不是没办法代码提示的各种 Action Type，尤其是没有 typescript 支持，不喜欢各种类型写好多次，不喜欢各种数据层概念，只想要实现一个简单朴素的数据管理工具","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAIAAACHqfpvAAAACXBIWXMAAAsSAAALEgHS3X78AAAA90lEQVQY021R204FIQzkP3SXa2kL7ALu5mjigw/+/z85Z4+JmjiQ0rR0pgUTQvTO5UycLxDlDJedc+uFZVkik9RCRN7j7jesc8YN9S2nTdPR0kuNs5ZDmfy6WhTCLE/PoZfz4/08Ti0lxpgAIhzGdQ1ve1LUS5o1zRIrOQte5y84LOvatrFICOHR0XLB2CG+C+rjJmADMdLoUESYWRU2Q6e0qgrhIgipQttaa/Q25XXS5422Ao1wFT96gw8pEMHRVoHyswtS5hxH76P1TZlXa9e/sFcEdGPOfe/McicNAeMgbvLAOzVLQjoo37u1/1FkZnzD74HhfAHm5jyES2JEdAAAAABJRU5ErkJggg==","aspectRatio":2.8125,"src":"/static/fca957b9be8350ac79ddfe25ec32c595/3c17d/banner.png","srcSet":"/static/fca957b9be8350ac79ddfe25ec32c595/e0491/banner.png 180w,\n/static/fca957b9be8350ac79ddfe25ec32c595/f4094/banner.png 360w,\n/static/fca957b9be8350ac79ddfe25ec32c595/3c17d/banner.png 720w,\n/static/fca957b9be8350ac79ddfe25ec32c595/05d05/banner.png 1080w,\n/static/fca957b9be8350ac79ddfe25ec32c595/ab46c/banner.png 1369w","sizes":"(max-width: 720px) 100vw, 720px"}}},"keywords":["整理","思考","功能","NOVUS","状态管理"]}}},{"node":{"excerpt":"一、什么是 DirtyDiff dirty 的意思在 Git 中表示当前本地代码与提交版本相比有修改，还没有提交。很多编辑器就会在行号旁边用颜色标识当前行的修改状态，用以提示用户当前文件状态，平时使用的时候是一个很好用的功能。 二、功能点 diffComputer 用来计算当前文件和 已提交文件的差别（修改、新增和删除） 将计算出来的差别转为 decorations…","id":"6e8d823e-7cd5-513a-a657-079a7bfe2d9d","fields":{"title":"🌋 WebIDE 的开发记录其七（DirtyDiff 支持）","slug":"/blog/workpad-part-7","date":"2020-02-05","datetime":"2020-02-05 22:43:52","description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第七篇文章，谈谈怎么在 monaco-editor 上添加编辑器必备的 Git Dirty Diff 功能。","categories":["code"],"keywords":["思考","整理","WorkPad","WebIDE","云开发","Dirty Diff"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🌋 WebIDE 的开发记录其七（DirtyDiff 支持）","date":"2020-02-05 22:43:52","description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第七篇文章，谈谈怎么在 monaco-editor 上添加编辑器必备的 Git Dirty Diff 功能。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsSAAALEgHS3X78AAAC0klEQVQ4y21U227aQBD1ayEhF2gJxNe113ewjbENNjZVpbRUUJSi0ryk//8Zp7MmpE3Vh6PZHa3PzDmza+nh6x4/jz+w3W6x2+1R1Q3yLMNqVSGjmOdFi3Q+x2yWvkLsi8WCzq2QZgVm+QJFnkOqqhIf1w3SdI6EDqqaBpMx2LYN07TaaDsOVFXFaDTC/f09hsMh4ihGXddg3IXOHGgGh6JzSLMkpooJVN2ARjAMA4HD4XMTGpEIAlmWoShKSyog9g4VCsMQ4TTGJEoRJRm8YAqprbSqEcUz+MGEumJwuYWpa4PpOmRBRFD+gsgxKqyTGscN4PgR3CCiSIRBEMDiNhzHayMjuVyQWgyGrr1294aQcsIWi3NEUYLpJEJIzVgmSZ5MIxjMbMlEFFVNIuKGBsvQodDHrex/IHKapiMII1jeBNwnQjeEJAw3Ld5CkGZFhoJQLgsyng46NBzqxLRfQGuLcjojyWSJsCpIyK44AXNcSIJEtN4SktHTOCQZPrI0RBJ7cD2LCMiGF4i141MRi4ZGajh5KDoznQC6RYTnzkzrROz5HNPIpQExWtPHngHb099A5DRNJY8NLMslclJTNhWWq/LU4ZmU0b0T18Z13db88XjcevU/iMEIyU9PTzh8P+Dx8RHH4/EtoYicny60YbCW3GDstGZ/IG6CTt05VFiQbDYb7Pd7HA6HM+HZRxuK5uK6r0A3Q3hhRhfex/s7hpu+ituBipuBiFp7Zjhi9PRqNE3zipehCDgk2cZgaKFzSVfCjBFEK4zVAJ2e3KJ7xhXtL2Vc3WpYLEs06zVqIqvpPyCZNH5GEFFIG1AH3d6YOozoSS1wNzLRp9xF7w6d7gd0L4ZtfNd5j+ubMarlAuu6otdWoqb/guSXW4TVFkG5g51/hhw2GPpr9HmFW2tBWKKnzXGhzHDNCsjJBqPJA1i6gZF+QfLpiGr7jObbLzS7Z/wGSDW4PYNdw5cAAAAASUVORK5CYII=","aspectRatio":1.3740458015267176,"src":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/3c17d/WorkPad-demo.png","srcSet":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/e0491/WorkPad-demo.png 180w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/f4094/WorkPad-demo.png 360w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/3c17d/WorkPad-demo.png 720w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/05d05/WorkPad-demo.png 1080w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/a021b/WorkPad-demo.png 1374w","sizes":"(max-width: 720px) 100vw, 720px"}}},"keywords":["思考","整理","WorkPad","WebIDE","云开发","Dirty Diff"]}}},{"node":{"excerpt":"一、背景 一个 IDE 和编辑器很明显的使用区别就是  go to definition   go to references  的定义和引用跳转，缺少了这个功能，那么和最简单的记事本有什么区别。 如果稍微深入了解 monaco-editor 之后，不满足只是简单的编辑，想要自动提示、自动补全的功能，比如 VSCode…","id":"cb747cc2-bb55-59e9-96e1-15760ef61af6","fields":{"title":"🌋 WebIDE 的开发记录其六（LSP 支持）","slug":"/blog/workpad-part-6","date":"2020-02-03","datetime":"2020-02-03 20:01:25","description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第六篇文章，谈谈怎么在 monaco-editor 上添加语言服务支持 LSP 的。","categories":["code"],"keywords":["思考","整理","WorkPad","WebIDE","云开发","LSP"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🌋 WebIDE 的开发记录其六（LSP 支持）","date":"2020-02-03 20:01:25","description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第六篇文章，谈谈怎么在 monaco-editor 上添加语言服务支持 LSP 的。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsSAAALEgHS3X78AAAC0klEQVQ4y21U227aQBD1ayEhF2gJxNe113ewjbENNjZVpbRUUJSi0ryk//8Zp7MmpE3Vh6PZHa3PzDmza+nh6x4/jz+w3W6x2+1R1Q3yLMNqVSGjmOdFi3Q+x2yWvkLsi8WCzq2QZgVm+QJFnkOqqhIf1w3SdI6EDqqaBpMx2LYN07TaaDsOVFXFaDTC/f09hsMh4ihGXddg3IXOHGgGh6JzSLMkpooJVN2ARjAMA4HD4XMTGpEIAlmWoShKSyog9g4VCsMQ4TTGJEoRJRm8YAqprbSqEcUz+MGEumJwuYWpa4PpOmRBRFD+gsgxKqyTGscN4PgR3CCiSIRBEMDiNhzHayMjuVyQWgyGrr1294aQcsIWi3NEUYLpJEJIzVgmSZ5MIxjMbMlEFFVNIuKGBsvQodDHrex/IHKapiMII1jeBNwnQjeEJAw3Ld5CkGZFhoJQLgsyng46NBzqxLRfQGuLcjojyWSJsCpIyK44AXNcSIJEtN4SktHTOCQZPrI0RBJ7cD2LCMiGF4i141MRi4ZGajh5KDoznQC6RYTnzkzrROz5HNPIpQExWtPHngHb099A5DRNJY8NLMslclJTNhWWq/LU4ZmU0b0T18Z13db88XjcevU/iMEIyU9PTzh8P+Dx8RHH4/EtoYicny60YbCW3GDstGZ/IG6CTt05VFiQbDYb7Pd7HA6HM+HZRxuK5uK6r0A3Q3hhRhfex/s7hpu+ituBipuBiFp7Zjhi9PRqNE3zipehCDgk2cZgaKFzSVfCjBFEK4zVAJ2e3KJ7xhXtL2Vc3WpYLEs06zVqIqvpPyCZNH5GEFFIG1AH3d6YOozoSS1wNzLRp9xF7w6d7gd0L4ZtfNd5j+ubMarlAuu6otdWoqb/guSXW4TVFkG5g51/hhw2GPpr9HmFW2tBWKKnzXGhzHDNCsjJBqPJA1i6gZF+QfLpiGr7jObbLzS7Z/wGSDW4PYNdw5cAAAAASUVORK5CYII=","aspectRatio":1.3740458015267176,"src":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/3c17d/WorkPad-demo.png","srcSet":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/e0491/WorkPad-demo.png 180w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/f4094/WorkPad-demo.png 360w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/3c17d/WorkPad-demo.png 720w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/05d05/WorkPad-demo.png 1080w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/a021b/WorkPad-demo.png 1374w","sizes":"(max-width: 720px) 100vw, 720px"}}},"keywords":["思考","整理","WorkPad","WebIDE","云开发","LSP"]}}},{"node":{"excerpt":"一、为什么要用 textmate 而不是内置的？ 实现 IDE 的过程中好奇为什么 moanco-editor 和 vscode 的高亮不太一样，比较简陋很不舒服，一番搜索发现  monaco-editor  的语言支持使用的是内置的  Monarch  这个语法高亮支持。 官方的解释  Why doesn't the editor support TextMate…","id":"758ac877-dba3-57b4-91c6-b5873001cb37","fields":{"title":"🌋 WebIDE 的开发记录其五（monaco-editor + textmate）","slug":"/blog/workpad-part-5","date":"2020-01-27","datetime":"2020-01-27 20:03:43","description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第五篇文章，谈谈怎么在 monaco-editor 用 textmate 替换内置语法和高亮的。","categories":["code"],"keywords":["思考","整理","WorkPad","WebIDE","云开发","在线编辑器"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🌋 WebIDE 的开发记录其五（monaco-editor + textmate）","date":"2020-01-27 20:03:43","description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第五篇文章，谈谈怎么在 monaco-editor 用 textmate 替换内置语法和高亮的。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsSAAALEgHS3X78AAAC0klEQVQ4y21U227aQBD1ayEhF2gJxNe113ewjbENNjZVpbRUUJSi0ryk//8Zp7MmpE3Vh6PZHa3PzDmza+nh6x4/jz+w3W6x2+1R1Q3yLMNqVSGjmOdFi3Q+x2yWvkLsi8WCzq2QZgVm+QJFnkOqqhIf1w3SdI6EDqqaBpMx2LYN07TaaDsOVFXFaDTC/f09hsMh4ihGXddg3IXOHGgGh6JzSLMkpooJVN2ARjAMA4HD4XMTGpEIAlmWoShKSyog9g4VCsMQ4TTGJEoRJRm8YAqprbSqEcUz+MGEumJwuYWpa4PpOmRBRFD+gsgxKqyTGscN4PgR3CCiSIRBEMDiNhzHayMjuVyQWgyGrr1294aQcsIWi3NEUYLpJEJIzVgmSZ5MIxjMbMlEFFVNIuKGBsvQodDHrex/IHKapiMII1jeBNwnQjeEJAw3Ld5CkGZFhoJQLgsyng46NBzqxLRfQGuLcjojyWSJsCpIyK44AXNcSIJEtN4SktHTOCQZPrI0RBJ7cD2LCMiGF4i141MRi4ZGajh5KDoznQC6RYTnzkzrROz5HNPIpQExWtPHngHb099A5DRNJY8NLMslclJTNhWWq/LU4ZmU0b0T18Z13db88XjcevU/iMEIyU9PTzh8P+Dx8RHH4/EtoYicny60YbCW3GDstGZ/IG6CTt05VFiQbDYb7Pd7HA6HM+HZRxuK5uK6r0A3Q3hhRhfex/s7hpu+ituBipuBiFp7Zjhi9PRqNE3zipehCDgk2cZgaKFzSVfCjBFEK4zVAJ2e3KJ7xhXtL2Vc3WpYLEs06zVqIqvpPyCZNH5GEFFIG1AH3d6YOozoSS1wNzLRp9xF7w6d7gd0L4ZtfNd5j+ubMarlAuu6otdWoqb/guSXW4TVFkG5g51/hhw2GPpr9HmFW2tBWKKnzXGhzHDNCsjJBqPJA1i6gZF+QfLpiGr7jObbLzS7Z/wGSDW4PYNdw5cAAAAASUVORK5CYII=","aspectRatio":1.3740458015267176,"src":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/3c17d/WorkPad-demo.png","srcSet":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/e0491/WorkPad-demo.png 180w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/f4094/WorkPad-demo.png 360w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/3c17d/WorkPad-demo.png 720w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/05d05/WorkPad-demo.png 1080w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/a021b/WorkPad-demo.png 1374w","sizes":"(max-width: 720px) 100vw, 720px"}}},"keywords":["思考","整理","WorkPad","WebIDE","云开发","在线编辑器"]}}},{"node":{"excerpt":"一、为什么要终端 程序员对电脑的控制大部分还是需要终端的帮助，运行服务、执行代码、调试等等操作都可以在终端中完成，甚至编辑功能也可以在终端中实现，运行环境的管理、文件、程序等能在终端中操作。一般意义上，IDE 和 编辑器的最大区别也是有终端功能的支持。所以日常开发终端是必不可少的一个工具，而在 web 中也已经有很成熟的工具 Xterm.js。 二、基础概念 TTY…","id":"d5d77854-262e-55b7-bd6f-361e5afef209","fields":{"title":"🌋 WebIDE 的开发记录其四（命令行终端）","slug":"/blog/workpad-part-4","date":"2020-01-23","datetime":"2020-01-23 21:45:01","description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第四篇文章，谈谈命令行终端是怎么集成的。","categories":["code"],"keywords":["思考","整理","WorkPad","WebIDE","云开发","在线编辑器"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🌋 WebIDE 的开发记录其四（命令行终端）","date":"2020-01-23 21:45:01","description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第四篇文章，谈谈命令行终端是怎么集成的。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsSAAALEgHS3X78AAAC0klEQVQ4y21U227aQBD1ayEhF2gJxNe113ewjbENNjZVpbRUUJSi0ryk//8Zp7MmpE3Vh6PZHa3PzDmza+nh6x4/jz+w3W6x2+1R1Q3yLMNqVSGjmOdFi3Q+x2yWvkLsi8WCzq2QZgVm+QJFnkOqqhIf1w3SdI6EDqqaBpMx2LYN07TaaDsOVFXFaDTC/f09hsMh4ihGXddg3IXOHGgGh6JzSLMkpooJVN2ARjAMA4HD4XMTGpEIAlmWoShKSyog9g4VCsMQ4TTGJEoRJRm8YAqprbSqEcUz+MGEumJwuYWpa4PpOmRBRFD+gsgxKqyTGscN4PgR3CCiSIRBEMDiNhzHayMjuVyQWgyGrr1294aQcsIWi3NEUYLpJEJIzVgmSZ5MIxjMbMlEFFVNIuKGBsvQodDHrex/IHKapiMII1jeBNwnQjeEJAw3Ld5CkGZFhoJQLgsyng46NBzqxLRfQGuLcjojyWSJsCpIyK44AXNcSIJEtN4SktHTOCQZPrI0RBJ7cD2LCMiGF4i141MRi4ZGajh5KDoznQC6RYTnzkzrROz5HNPIpQExWtPHngHb099A5DRNJY8NLMslclJTNhWWq/LU4ZmU0b0T18Z13db88XjcevU/iMEIyU9PTzh8P+Dx8RHH4/EtoYicny60YbCW3GDstGZ/IG6CTt05VFiQbDYb7Pd7HA6HM+HZRxuK5uK6r0A3Q3hhRhfex/s7hpu+ituBipuBiFp7Zjhi9PRqNE3zipehCDgk2cZgaKFzSVfCjBFEK4zVAJ2e3KJ7xhXtL2Vc3WpYLEs06zVqIqvpPyCZNH5GEFFIG1AH3d6YOozoSS1wNzLRp9xF7w6d7gd0L4ZtfNd5j+ubMarlAuu6otdWoqb/guSXW4TVFkG5g51/hhw2GPpr9HmFW2tBWKKnzXGhzHDNCsjJBqPJA1i6gZF+QfLpiGr7jObbLzS7Z/wGSDW4PYNdw5cAAAAASUVORK5CYII=","aspectRatio":1.3740458015267176,"src":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/3c17d/WorkPad-demo.png","srcSet":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/e0491/WorkPad-demo.png 180w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/f4094/WorkPad-demo.png 360w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/3c17d/WorkPad-demo.png 720w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/05d05/WorkPad-demo.png 1080w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/a021b/WorkPad-demo.png 1374w","sizes":"(max-width: 720px) 100vw, 720px"}}},"keywords":["思考","整理","WorkPad","WebIDE","云开发","在线编辑器"]}}},{"node":{"excerpt":"一方面说怎么集成 monaco-editor 到项目中，另一方面怎么用扩展的形式加入新功能。 PS: 本文集成 monaco-editor 不是普遍适用的，包含很多针对当前项目的集成，所以仅供参考。 一、monaco-editor 是什么？ monaco-editor 是一个非常优秀的代码编辑器，大名鼎鼎的 VSCode 的编辑器内核，有非常强大的 IDE…","id":"4c3148b1-24ac-5e21-8b88-d596a9a3f9d8","fields":{"title":"🌋 WebIDE 的开发记录其三（editor 集成）","slug":"/blog/workpad-part-3","date":"2020-01-19","datetime":"2020-01-19 21:00:41","description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第三篇文章，谈谈 monaco-editor 的集成的。","categories":["code"],"keywords":["思考","整理","WorkPad","WebIDE","云开发","在线编辑器"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🌋 WebIDE 的开发记录其三（editor 集成）","date":"2020-01-19 21:00:41","description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第三篇文章，谈谈 monaco-editor 的集成的。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsSAAALEgHS3X78AAAC0klEQVQ4y21U227aQBD1ayEhF2gJxNe113ewjbENNjZVpbRUUJSi0ryk//8Zp7MmpE3Vh6PZHa3PzDmza+nh6x4/jz+w3W6x2+1R1Q3yLMNqVSGjmOdFi3Q+x2yWvkLsi8WCzq2QZgVm+QJFnkOqqhIf1w3SdI6EDqqaBpMx2LYN07TaaDsOVFXFaDTC/f09hsMh4ihGXddg3IXOHGgGh6JzSLMkpooJVN2ARjAMA4HD4XMTGpEIAlmWoShKSyog9g4VCsMQ4TTGJEoRJRm8YAqprbSqEcUz+MGEumJwuYWpa4PpOmRBRFD+gsgxKqyTGscN4PgR3CCiSIRBEMDiNhzHayMjuVyQWgyGrr1294aQcsIWi3NEUYLpJEJIzVgmSZ5MIxjMbMlEFFVNIuKGBsvQodDHrex/IHKapiMII1jeBNwnQjeEJAw3Ld5CkGZFhoJQLgsyng46NBzqxLRfQGuLcjojyWSJsCpIyK44AXNcSIJEtN4SktHTOCQZPrI0RBJ7cD2LCMiGF4i141MRi4ZGajh5KDoznQC6RYTnzkzrROz5HNPIpQExWtPHngHb099A5DRNJY8NLMslclJTNhWWq/LU4ZmU0b0T18Z13db88XjcevU/iMEIyU9PTzh8P+Dx8RHH4/EtoYicny60YbCW3GDstGZ/IG6CTt05VFiQbDYb7Pd7HA6HM+HZRxuK5uK6r0A3Q3hhRhfex/s7hpu+ituBipuBiFp7Zjhi9PRqNE3zipehCDgk2cZgaKFzSVfCjBFEK4zVAJ2e3KJ7xhXtL2Vc3WpYLEs06zVqIqvpPyCZNH5GEFFIG1AH3d6YOozoSS1wNzLRp9xF7w6d7gd0L4ZtfNd5j+ubMarlAuu6otdWoqb/guSXW4TVFkG5g51/hhw2GPpr9HmFW2tBWKKnzXGhzHDNCsjJBqPJA1i6gZF+QfLpiGr7jObbLzS7Z/wGSDW4PYNdw5cAAAAASUVORK5CYII=","aspectRatio":1.3740458015267176,"src":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/3c17d/WorkPad-demo.png","srcSet":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/e0491/WorkPad-demo.png 180w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/f4094/WorkPad-demo.png 360w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/3c17d/WorkPad-demo.png 720w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/05d05/WorkPad-demo.png 1080w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/a021b/WorkPad-demo.png 1374w","sizes":"(max-width: 720px) 100vw, 720px"}}},"keywords":["思考","整理","WorkPad","WebIDE","云开发","在线编辑器"]}}},{"node":{"excerpt":"基础架构就是实现什么核心功能，搭建一个什么样的接口，定义什么样的扩展开发方式。核心的开发模式很多，我选择的也并不是最优解，只是这个项目的实现，最后结果至少还不错，下面从三个方面说一下通用的层面做了哪些工作。 一. 扩展机制 （Extension） 每个 extension 里面都按照标准接口定义，注册数据模型、UI…","id":"3eeb377f-17b4-5e6c-baab-f9a708c186c1","fields":{"title":"🌋 WebIDE 的开发记录其二（核心架构）","slug":"/blog/workpad-part-2","date":"2020-01-12","datetime":"2020-01-12 22:23:32","description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第二篇文章，谈谈基础架构是怎么实现的。","categories":["code"],"keywords":["思考","整理","WorkPad","WebIDE","云开发","在线编辑器","NOVUS","状态管理"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🌋 WebIDE 的开发记录其二（核心架构）","date":"2020-01-12 22:23:32","description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第二篇文章，谈谈基础架构是怎么实现的。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAJABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAECAwX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAHtqmQaB//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEAAQUCX//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEABj8CX//EABsQAAICAwEAAAAAAAAAAAAAAAABESExQVFh/9oACAEBAAE/IV6Ra5BZseUI/9oADAMBAAIAAwAAABDgD//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABoQAAMAAwEAAAAAAAAAAAAAAAABESExcaH/2gAIAQEAAT8QXDqu45Rs61wsG0eG5ELbp5DQ/9k=","aspectRatio":2.2222222222222223,"src":"/static/b03f754ddc36b87bcf4b4ccaa71f17fd/7d509/ground-design.jpg","srcSet":"/static/b03f754ddc36b87bcf4b4ccaa71f17fd/8d052/ground-design.jpg 180w,\n/static/b03f754ddc36b87bcf4b4ccaa71f17fd/e2788/ground-design.jpg 360w,\n/static/b03f754ddc36b87bcf4b4ccaa71f17fd/7d509/ground-design.jpg 720w,\n/static/b03f754ddc36b87bcf4b4ccaa71f17fd/10d63/ground-design.jpg 1080w,\n/static/b03f754ddc36b87bcf4b4ccaa71f17fd/3adc0/ground-design.jpg 1245w","sizes":"(max-width: 720px) 100vw, 720px"}}},"keywords":["思考","整理","WorkPad","WebIDE","云开发","在线编辑器","NOVUS","状态管理"]}}},{"node":{"excerpt":"先看效果演示： 一、为什么要做 在我刚开始入门的时候，当时用  CodeMirror  做了一个前端  Demo  系统，类似  JSFiddle  可以用原生的  html 、 css 、 js  保存展示代码，然后在博客内引入代码和效果，这是代码编辑器的最初版本。后来看到 vscode…","id":"80d6df1c-8fb3-5730-bf2b-331397c4c452","fields":{"title":"🌋 WebIDE 的开发记录其一（前言和概览）","slug":"/blog/workpad-part-1","date":"2019-12-24","datetime":"2019-12-24 10:58:09","description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第一篇文章，谈谈想法、技术栈、基础核心等。","categories":["code"],"keywords":["思考","整理","WorkPad","WebIDE","云开发","在线编辑器"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🌋 WebIDE 的开发记录其一（前言和概览）","date":"2019-12-24 10:58:09","description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第一篇文章，谈谈想法、技术栈、基础核心等。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsSAAALEgHS3X78AAAC0klEQVQ4y21U227aQBD1ayEhF2gJxNe113ewjbENNjZVpbRUUJSi0ryk//8Zp7MmpE3Vh6PZHa3PzDmza+nh6x4/jz+w3W6x2+1R1Q3yLMNqVSGjmOdFi3Q+x2yWvkLsi8WCzq2QZgVm+QJFnkOqqhIf1w3SdI6EDqqaBpMx2LYN07TaaDsOVFXFaDTC/f09hsMh4ihGXddg3IXOHGgGh6JzSLMkpooJVN2ARjAMA4HD4XMTGpEIAlmWoShKSyog9g4VCsMQ4TTGJEoRJRm8YAqprbSqEcUz+MGEumJwuYWpa4PpOmRBRFD+gsgxKqyTGscN4PgR3CCiSIRBEMDiNhzHayMjuVyQWgyGrr1294aQcsIWi3NEUYLpJEJIzVgmSZ5MIxjMbMlEFFVNIuKGBsvQodDHrex/IHKapiMII1jeBNwnQjeEJAw3Ld5CkGZFhoJQLgsyng46NBzqxLRfQGuLcjojyWSJsCpIyK44AXNcSIJEtN4SktHTOCQZPrI0RBJ7cD2LCMiGF4i141MRi4ZGajh5KDoznQC6RYTnzkzrROz5HNPIpQExWtPHngHb099A5DRNJY8NLMslclJTNhWWq/LU4ZmU0b0T18Z13db88XjcevU/iMEIyU9PTzh8P+Dx8RHH4/EtoYicny60YbCW3GDstGZ/IG6CTt05VFiQbDYb7Pd7HA6HM+HZRxuK5uK6r0A3Q3hhRhfex/s7hpu+ituBipuBiFp7Zjhi9PRqNE3zipehCDgk2cZgaKFzSVfCjBFEK4zVAJ2e3KJ7xhXtL2Vc3WpYLEs06zVqIqvpPyCZNH5GEFFIG1AH3d6YOozoSS1wNzLRp9xF7w6d7gd0L4ZtfNd5j+ubMarlAuu6otdWoqb/guSXW4TVFkG5g51/hhw2GPpr9HmFW2tBWKKnzXGhzHDNCsjJBqPJA1i6gZF+QfLpiGr7jObbLzS7Z/wGSDW4PYNdw5cAAAAASUVORK5CYII=","aspectRatio":1.3740458015267176,"src":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/3c17d/WorkPad-demo.png","srcSet":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/e0491/WorkPad-demo.png 180w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/f4094/WorkPad-demo.png 360w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/3c17d/WorkPad-demo.png 720w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/05d05/WorkPad-demo.png 1080w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/a021b/WorkPad-demo.png 1374w","sizes":"(max-width: 720px) 100vw, 720px"}}},"keywords":["思考","整理","WorkPad","WebIDE","云开发","在线编辑器"]}}},{"node":{"excerpt":"想分享的是现代前端复杂的工程化方案，其中需要的各种配置文件，应该没有几个文件没见过吧~\n每次新技术、新需求来临，大呼学不动了的你，看到这些又要披上战甲、拿起键盘冲啊!!! 下面的表格是按照自己几个项目里面用到的一些方案的文件，也算是目前常见的一些了，具体基本上根据文件名就能看出是什么的配置了： name tech desc package.json npm node…","id":"4dc5afcb-5536-5cce-87ea-f1e2b7f4ab48","fields":{"title":"🔰 前端编辑器常见配置文件","slug":"/blog/config-files","date":"2019-11-27","datetime":"2019-11-27 01:17:36","description":"项目根目录会有很多配置文件，今天梳理一下有哪些，不是罗列，而是感叹下前端现在的工具和配置的 “艺术”","categories":["code"],"keywords":["前端","整理"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🔰 前端编辑器常见配置文件","date":"2019-11-27 01:17:36","description":"项目根目录会有很多配置文件，今天梳理一下有哪些，不是罗列，而是感叹下前端现在的工具和配置的 “艺术”","banner":{"childImageSharp":{"sizes":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAT/xAAVAQEBAAAAAAAAAAAAAAAAAAABBP/aAAwDAQACEAMQAAABqoJmEJ//xAAZEAEAAgMAAAAAAAAAAAAAAAABAAMCESH/2gAIAQEAAQUCxrI9Gs3/AP/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAgBAgEBPwFtf//EABYQAAMAAAAAAAAAAAAAAAAAAAAQEf/aAAgBAQAGPwIi/8QAGBABAQEBAQAAAAAAAAAAAAAAAQARITH/2gAIAQEAAT8h2icyHswiT//aAAwDAQACAAMAAAAQeB//xAAXEQADAQAAAAAAAAAAAAAAAAAAAREh/9oACAEDAQE/EEsIf//EABYRAQEBAAAAAAAAAAAAAAAAAAEAYf/aAAgBAgEBPxBVtr//xAAYEAEBAQEBAAAAAAAAAAAAAAABEQAhcf/aAAgBAQABPxBgVLkzJQeQzMG+m//Z","aspectRatio":4.390243902439025,"src":"/static/a0a9b6c2d71bc1b167824a17c016c73e/7d509/banner.jpg","srcSet":"/static/a0a9b6c2d71bc1b167824a17c016c73e/8d052/banner.jpg 180w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/e2788/banner.jpg 360w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/7d509/banner.jpg 720w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/10d63/banner.jpg 1080w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/7f945/banner.jpg 1440w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/d8255/banner.jpg 1920w","sizes":"(max-width: 720px) 100vw, 720px"}}},"keywords":["前端","整理"]}}},{"node":{"excerpt":"…","id":"b34fb3e4-f6a1-5974-b61c-ea8ee68cecb9","fields":{"title":"🏃‍♂️ TypeScript 以及一些理解和技巧","slug":"/blog/typescript","date":"2019-11-21","datetime":"2019-11-21 11:47:10","description":"TypeScript 真的是一个很伟大的前端静态类型解决方案，已经离不开了，简单列举一些内容~~","categories":["code"],"keywords":["整理","TypeScript","TS","前端"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🏃‍♂️ TypeScript 以及一些理解和技巧","date":"2019-11-21 11:47:10","description":"TypeScript 真的是一个很伟大的前端静态类型解决方案，已经离不开了，简单列举一些内容~~","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsSAAALEgHS3X78AAABUElEQVQozz1Su07DQBA8cOwkhHwDPSVCUCI6lAJBg0TPRwB2TCgpkBAgQREESGn4Fj9IgiH5mht29u5SjLy3tzuzs2ezcVMjziqY6xJrAsbtYYVOXoF33dzdmatCkfi7KC31y9p2XlnGUmtNKys12R/V6N/WSkJiNkghfKFrHFLECRGb0uOFLXtXhEGVMYnY5KZy0LOPKdbyLmLBeqr9tisCkrOGFqPMWSWZuSxwNP7F4K3B8cdCcfq5wO7jDINxg7PJEvvPP0rcG9V+6tr69QghlbJqZYGEW3ffOHlvcD75w+HrHHtPc+w8THHwMsPF1xLb91OdjI46bi0yYYWeEBsmqETQurNVIE7dIxh9qFIJKBZJnjEn426FhGcbuZw1YWyvpKQsDAtnIV0wzxydhIcMg9Aqz1LrJkz8csOLRm7R2pR4cGfh1yJCPe3yUUL8DzOweAy6RSgTAAAAAElFTkSuQmCC","aspectRatio":2.608695652173913,"src":"/static/dee044e1845238d1a65fdad7a74d6b22/3c17d/typescript.png","srcSet":"/static/dee044e1845238d1a65fdad7a74d6b22/e0491/typescript.png 180w,\n/static/dee044e1845238d1a65fdad7a74d6b22/f4094/typescript.png 360w,\n/static/dee044e1845238d1a65fdad7a74d6b22/3c17d/typescript.png 720w,\n/static/dee044e1845238d1a65fdad7a74d6b22/d7187/typescript.png 832w","sizes":"(max-width: 720px) 100vw, 720px"}}},"keywords":["整理","TypeScript","TS","前端"]}}},{"node":{"excerpt":"想分享的是让你知道 ESLint 的简单背景和用法，以及知道 ESLint 怎么在项目中发挥作用的。 1. ESlint 是个什么 顾名思义  ECMAScript Linter  就是一个 ES 规范的检查器，负责检查代码语法/风格/错误。 在天地初开之时，JS…","id":"5f901b21-3d23-5138-aa7a-695fc5230c0b","fields":{"title":"🚑 Eslint 周边","slug":"/blog/eslint","date":"2019-11-18","datetime":"2019-11-18 23:31:36","description":"ESlint 一直在用，前端大杀器，团队协作最基础的一个支撑，简单写点记录下温故知新的东西.","categories":["code"],"keywords":["ESLint","前端","最佳实践"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🚑 Eslint 周边","date":"2019-11-18 23:31:36","description":"ESlint 一直在用，前端大杀器，团队协作最基础的一个支撑，简单写点记录下温故知新的东西.","banner":{"childImageSharp":{"sizes":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAT/xAAVAQEBAAAAAAAAAAAAAAAAAAABBP/aAAwDAQACEAMQAAABqoJmEJ//xAAZEAEAAgMAAAAAAAAAAAAAAAABAAMCESH/2gAIAQEAAQUCxrI9Gs3/AP/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAgBAgEBPwFtf//EABYQAAMAAAAAAAAAAAAAAAAAAAAQEf/aAAgBAQAGPwIi/8QAGBABAQEBAQAAAAAAAAAAAAAAAQARITH/2gAIAQEAAT8h2icyHswiT//aAAwDAQACAAMAAAAQeB//xAAXEQADAQAAAAAAAAAAAAAAAAAAAREh/9oACAEDAQE/EEsIf//EABYRAQEBAAAAAAAAAAAAAAAAAAEAYf/aAAgBAgEBPxBVtr//xAAYEAEBAQEBAAAAAAAAAAAAAAABEQAhcf/aAAgBAQABPxBgVLkzJQeQzMG+m//Z","aspectRatio":4.390243902439025,"src":"/static/a0a9b6c2d71bc1b167824a17c016c73e/7d509/banner.jpg","srcSet":"/static/a0a9b6c2d71bc1b167824a17c016c73e/8d052/banner.jpg 180w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/e2788/banner.jpg 360w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/7d509/banner.jpg 720w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/10d63/banner.jpg 1080w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/7f945/banner.jpg 1440w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/d8255/banner.jpg 1920w","sizes":"(max-width: 720px) 100vw, 720px"}}},"keywords":["ESLint","前端","最佳实践"]}}},{"node":{"excerpt":"想分享的是让你知道  flutter  是一个非常不错的跨端解决方案，在开发效率、编程体验、表现力、流畅等方面表现很好，能够承载出色的产品的实现。但是如果你们的生产环境要求比较严格、需求有些极致，还是有很多问题要注意的，不过技术本身的发展趋势还是很值得期待的。 〇、flutter 是什么? flutter  按照官方的定义是一个高性能、一致性的跨端 app SDK…","id":"c6708bf2-597d-5d2f-80c1-aec06f564cfc","fields":{"title":"🎨 使用 flutter 构建移动端 App","slug":"/blog/flutter","date":"2019-11-10","datetime":"2019-11-10 16:22:11","description":"flutter 已经不算是新生的事物了，毫无疑问是一个非常优秀、很有前景的技术栈，但是并不能说生产环境里这个一个多么低门槛的完美解决方案。","categories":["code"],"keywords":["整理","思考","flutter"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🎨 使用 flutter 构建移动端 App","date":"2019-11-10 16:22:11","description":"flutter 已经不算是新生的事物了，毫无疑问是一个非常优秀、很有前景的技术栈，但是并不能说生产环境里这个一个多么低门槛的完美解决方案。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAIAAADKYVtkAAAACXBIWXMAAAsTAAALEwEAmpwYAAABOElEQVQY0zWPy0oCUQCGz5TQC+QTtGzTqh6gRRBtoo20jlxGm1p1hQqMaMTAQAoKUgxdREEULSK7ESpKgZKLbKaamryMHmfm3E9G9O0//u8HVcwKDrchdBFyXZcQwjkjBAnOGBdSyip0VpI3Y5F7EHhTgjWwBTtC9U71S1FNkLfw7rNlmZ+arpdKJcMwOKOQSBMJp15pWI3tR9R7AH2xYs/anTeQHZjd8a7mQAgq6jegmNg2opRijAnGiDCGbVa/in+0Eu88W65OJnUwU+zbM84L5onW9O2fDU0v9s/FujY00O6klPyBf5sJFzyRTsUvw9daJvgq/dHM0ulL08HtC1KIlpSb2fKwf6p7IQXIP+1hwciTiUaOaooKlXV9IhofDN+OH1+Q2qGUjPJfPZd+GJ2PeJbznlDlBzoL6nJadrmkAAAAAElFTkSuQmCC","aspectRatio":4,"src":"/static/b5540b62e5e351560b4a55e1a7a78026/3c17d/banner.png","srcSet":"/static/b5540b62e5e351560b4a55e1a7a78026/e0491/banner.png 180w,\n/static/b5540b62e5e351560b4a55e1a7a78026/f4094/banner.png 360w,\n/static/b5540b62e5e351560b4a55e1a7a78026/3c17d/banner.png 720w,\n/static/b5540b62e5e351560b4a55e1a7a78026/05d05/banner.png 1080w,\n/static/b5540b62e5e351560b4a55e1a7a78026/3bf79/banner.png 1440w,\n/static/b5540b62e5e351560b4a55e1a7a78026/5707d/banner.png 1600w","sizes":"(max-width: 720px) 100vw, 720px"}}},"keywords":["整理","思考","flutter"]}}},{"node":{"excerpt":"…","id":"afcf2287-a883-5dd2-b595-29470fa365e9","fields":{"title":"🔐 数据结构和算法 [ONGOING]","slug":"/blog/data-structure-algorithm","date":"2019-10-29","datetime":"2019-10-29 11:45:48","description":"数据结构对于一个程序员是一个基本功，出身计算机科学的肯定会接触过。算法也不用说，常见的算法思想对于业务和能力的提升是显而易见的，至少解决问题的能力建立在熟悉常见数据结构和常见算法的基础上。数据结构和算法是在 IT 行业想有精进的最基础的能力，日常业务、数据处理和算法都必须知道这些，必须好好打扎实这个基础。","categories":["algorithm"],"keywords":["算法","整理","思考"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🔐 数据结构和算法 [ONGOING]","date":"2019-10-29 11:45:48","description":"数据结构对于一个程序员是一个基本功，出身计算机科学的肯定会接触过。算法也不用说，常见的算法思想对于业务和能力的提升是显而易见的，至少解决问题的能力建立在熟悉常见数据结构和常见算法的基础上。数据结构和算法是在 IT 行业想有精进的最基础的能力，日常业务、数据处理和算法都必须知道这些，必须好好打扎实这个基础。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAEABQDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAP/xAAWAQEBAQAAAAAAAAAAAAAAAAABAwT/2gAMAwEAAhADEAAAAY0LYphP/8QAGBAAAgMAAAAAAAAAAAAAAAAAAAECEBH/2gAIAQEAAQUCJPa//8QAFREBAQAAAAAAAAAAAAAAAAAAEEH/2gAIAQMBAT8Bh//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABYQAAMAAAAAAAAAAAAAAAAAAAABEP/aAAgBAQAGPwIU/8QAGBAAAgMAAAAAAAAAAAAAAAAAAUEAECH/2gAIAQEAAT8higDFX//aAAwDAQACAAMAAAAQBA//xAAWEQADAAAAAAAAAAAAAAAAAAABEDH/2gAIAQMBAT8QFL//xAAWEQEBAQAAAAAAAAAAAAAAAAABEDH/2gAIAQIBAT8QdJ//xAAYEAACAwAAAAAAAAAAAAAAAAABMQAQEf/aAAgBAQABPxCFBUKZX//Z","aspectRatio":4.5,"src":"/static/29aecd508bd3b3fd63c1ecba6cea6f1e/7d509/banner.jpg","srcSet":"/static/29aecd508bd3b3fd63c1ecba6cea6f1e/8d052/banner.jpg 180w,\n/static/29aecd508bd3b3fd63c1ecba6cea6f1e/e2788/banner.jpg 360w,\n/static/29aecd508bd3b3fd63c1ecba6cea6f1e/7d509/banner.jpg 720w,\n/static/29aecd508bd3b3fd63c1ecba6cea6f1e/10d63/banner.jpg 1080w,\n/static/29aecd508bd3b3fd63c1ecba6cea6f1e/7f945/banner.jpg 1440w,\n/static/29aecd508bd3b3fd63c1ecba6cea6f1e/0a91b/banner.jpg 1746w","sizes":"(max-width: 720px) 100vw, 720px"}}},"keywords":["算法","整理","思考"]}}},{"node":{"excerpt":"想分享的是 Babel 这个工具的流程和最佳实践，平时开发必不可少 Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or…","id":"13caf899-55e2-577f-ab91-786a3d2322db","fields":{"title":"💡 Babel 再理解和最佳实践","slug":"/blog/babel-understanding","date":"2019-10-21","datetime":"2019-10-21 13:54:13","description":"现代前端技术发展的奠基石 Babel，一个神奇的存在，现代前端、工程化必不可少的一块拼图，简单梳理下体系和目前的最佳实践。","categories":["code"],"keywords":["babel","ES6","polyfill","最佳实践","前端"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"💡 Babel 再理解和最佳实践","date":"2019-10-21 13:54:13","description":"现代前端技术发展的奠基石 Babel，一个神奇的存在，现代前端、工程化必不可少的一块拼图，简单梳理下体系和目前的最佳实践。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAMF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAc2hEQf/xAAVEAEBAAAAAAAAAAAAAAAAAAACEP/aAAgBAQABBQI3/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFhAAAwAAAAAAAAAAAAAAAAAAABAx/9oACAEBAAY/AiL/xAAcEAABAwUAAAAAAAAAAAAAAAABABAhETFBgZH/2gAIAQEAAT8huxxRSAGm/9oADAMBAAIAAwAAABCIL//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABYRAAMAAAAAAAAAAAAAAAAAAAEQEf/aAAgBAgEBPxCBf//EABkQAQEBAQEBAAAAAAAAAAAAAAERACExYf/aAAgBAQABPxDpCItaHNgavqHLVUO/N//Z","aspectRatio":4,"src":"/static/05c5a5df4b2675749b7cad753bb8726b/4fe8c/banner.jpg","srcSet":"/static/05c5a5df4b2675749b7cad753bb8726b/8d052/banner.jpg 180w,\n/static/05c5a5df4b2675749b7cad753bb8726b/e2788/banner.jpg 360w,\n/static/05c5a5df4b2675749b7cad753bb8726b/4fe8c/banner.jpg 600w","sizes":"(max-width: 600px) 100vw, 600px"}}},"keywords":["babel","ES6","polyfill","最佳实践","前端"]}}},{"node":{"excerpt":"想分享的是自己对全栈的想法，从自豪的自称为全栈，到现在懂得术业有专攻，全栈是个职业，不能随便叫自己全栈开发工程师，对职业本身负责，能力广泛、兴趣宽广、懂得很多，也只能是我自己项目的全栈工程师。 Just do whatever it takes to make it work…","id":"1ef706c9-b97f-574f-9d5a-7fa6f0fb905e","fields":{"title":"🚀 全栈=全干","slug":"/blog/full-stack","date":"2019-09-28","datetime":"2019-09-28 09:39:01","description":"全栈=全干，一个在前后端都有生产能力、各类技术都有涉猎的工种，一般顶着这个头衔表示团队多面手、救火队员、项目全包的瑞士军刀，在一线岗位发扬不怕苦不怕累、哪里需要哪里搬的精神，广受小公司、创业公司的欢迎。","categories":["code"],"keywords":["思考","协作","技巧"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🚀 全栈=全干","date":"2019-09-28 09:39:01","description":"全栈=全干，一个在前后端都有生产能力、各类技术都有涉猎的工种，一般顶着这个头衔表示团队多面手、救火队员、项目全包的瑞士军刀，在一线岗位发扬不怕苦不怕累、哪里需要哪里搬的精神，广受小公司、创业公司的欢迎。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAT/xAAVAQEBAAAAAAAAAAAAAAAAAAABBP/aAAwDAQACEAMQAAABqoJmEJ//xAAZEAEAAgMAAAAAAAAAAAAAAAABAAMCESH/2gAIAQEAAQUCxrI9Gs3/AP/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAgBAgEBPwFtf//EABYQAAMAAAAAAAAAAAAAAAAAAAAQEf/aAAgBAQAGPwIi/8QAGBABAQEBAQAAAAAAAAAAAAAAAQARITH/2gAIAQEAAT8h2icyHswiT//aAAwDAQACAAMAAAAQeB//xAAXEQADAQAAAAAAAAAAAAAAAAAAAREh/9oACAEDAQE/EEsIf//EABYRAQEBAAAAAAAAAAAAAAAAAAEAYf/aAAgBAgEBPxBVtr//xAAYEAEBAQEBAAAAAAAAAAAAAAABEQAhcf/aAAgBAQABPxBgVLkzJQeQzMG+m//Z","aspectRatio":4.390243902439025,"src":"/static/a0a9b6c2d71bc1b167824a17c016c73e/7d509/banner.jpg","srcSet":"/static/a0a9b6c2d71bc1b167824a17c016c73e/8d052/banner.jpg 180w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/e2788/banner.jpg 360w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/7d509/banner.jpg 720w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/10d63/banner.jpg 1080w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/7f945/banner.jpg 1440w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/d8255/banner.jpg 1920w","sizes":"(max-width: 720px) 100vw, 720px"}}},"keywords":["思考","协作","技巧"]}}},{"node":{"excerpt":"想分享的是对 React-Hooks 这个新功能的思考，不仅仅是新的接口，重要的是这种开发模式代表的逻辑的拆分，状态和副作用的思维方式，而不是生命周期~~ Hooks 概念刚出来的时候就看了发布会的 Presentation，当时感觉思想特别好，能够在一个函数里面就可以对数据和生命周期进行管理。 而且对于从 prototype 过来的原型继承，一直觉得虽然 Class…","id":"960874c5-617a-5439-a17d-7d0e44fcb297","fields":{"title":"⚓ React Hooks 理解","slug":"/blog/react-hooks-vs-class","date":"2019-09-18","datetime":"2019-09-18 20:24:36","description":"hooks 的思想是开发者不再需要去理清每一个生命周期函数的触发时机，以及在里面处理逻辑会有哪些影响。而是更关注去思考哪些是状态，哪些是副作用，哪些是需要缓存的复杂计算和不必要的渲染。 class 更偏向的是清晰完整的生命周期，一个经典的面向对象思想，强调的是方法和属性。","categories":["code"],"keywords":["react","hooks","技巧","思考","功能"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"⚓ React Hooks 理解","date":"2019-09-18 20:24:36","description":"hooks 的思想是开发者不再需要去理清每一个生命周期函数的触发时机，以及在里面处理逻辑会有哪些影响。而是更关注去思考哪些是状态，哪些是副作用，哪些是需要缓存的复杂计算和不必要的渲染。 class 更偏向的是清晰完整的生命周期，一个经典的面向对象思想，强调的是方法和属性。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAGABQDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAT/xAAWAQEBAQAAAAAAAAAAAAAAAAAABAX/2gAMAwEAAhADEAAAAbBVnAf/xAAUEAEAAAAAAAAAAAAAAAAAAAAQ/9oACAEBAAEFAn//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAUEAEAAAAAAAAAAAAAAAAAAAAQ/9oACAEBAAY/An//xAAVEAEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAQABPyGqr//aAAwDAQACAAMAAAAQfD//xAAVEQEBAAAAAAAAAAAAAAAAAAAQEf/aAAgBAwEBPxCn/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQIBAT8QiP/EABgQAAMBAQAAAAAAAAAAAAAAAAABESFB/9oACAEBAAE/ELGsUW9LP//Z","aspectRatio":3.3962264150943398,"src":"/static/01f96153bdd5c8bda1b12a6a5ec91e8e/7d509/banner.jpg","srcSet":"/static/01f96153bdd5c8bda1b12a6a5ec91e8e/8d052/banner.jpg 180w,\n/static/01f96153bdd5c8bda1b12a6a5ec91e8e/e2788/banner.jpg 360w,\n/static/01f96153bdd5c8bda1b12a6a5ec91e8e/7d509/banner.jpg 720w,\n/static/01f96153bdd5c8bda1b12a6a5ec91e8e/c6ea7/banner.jpg 980w","sizes":"(max-width: 720px) 100vw, 720px"}}},"keywords":["react","hooks","技巧","思考","功能"]}}},{"node":{"excerpt":"想分享的是自己在团队内推行的一个项目说明，尤其是多项目切换和多人协作的工作环境。 1. 咋想的 项目的声明周期包括初始化、开发、迭代、部署、交接等，一个维护良好的项目的这些流程不可能随意混乱。在 git 仓库托管大部分项目的背景下，readme 一般作为一个 work board…","id":"00cea46f-ef47-5a4a-b551-2809bd9770e0","fields":{"title":"📒 项目说明怎么写 - Readme 的自我修养","slug":"/blog/project-readme","date":"2019-09-10","datetime":"2019-09-10 20:06:21","description":"项目的门面，项目的第一眼，交接的核心，质量的基础，沉淀和总结的关键，写好一个 ReadMe 是一个程序员的基本要求。","categories":["code"],"keywords":["技巧","最佳实践","协作"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"📒 项目说明怎么写 - Readme 的自我修养","date":"2019-09-10 20:06:21","description":"项目的门面，项目的第一眼，交接的核心，质量的基础，沉淀和总结的关键，写好一个 ReadMe 是一个程序员的基本要求。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAT/xAAVAQEBAAAAAAAAAAAAAAAAAAABBP/aAAwDAQACEAMQAAABqoJmEJ//xAAZEAEAAgMAAAAAAAAAAAAAAAABAAMCESH/2gAIAQEAAQUCxrI9Gs3/AP/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAgBAgEBPwFtf//EABYQAAMAAAAAAAAAAAAAAAAAAAAQEf/aAAgBAQAGPwIi/8QAGBABAQEBAQAAAAAAAAAAAAAAAQARITH/2gAIAQEAAT8h2icyHswiT//aAAwDAQACAAMAAAAQeB//xAAXEQADAQAAAAAAAAAAAAAAAAAAAREh/9oACAEDAQE/EEsIf//EABYRAQEBAAAAAAAAAAAAAAAAAAEAYf/aAAgBAgEBPxBVtr//xAAYEAEBAQEBAAAAAAAAAAAAAAABEQAhcf/aAAgBAQABPxBgVLkzJQeQzMG+m//Z","aspectRatio":4.390243902439025,"src":"/static/a0a9b6c2d71bc1b167824a17c016c73e/7d509/banner.jpg","srcSet":"/static/a0a9b6c2d71bc1b167824a17c016c73e/8d052/banner.jpg 180w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/e2788/banner.jpg 360w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/7d509/banner.jpg 720w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/10d63/banner.jpg 1080w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/7f945/banner.jpg 1440w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/d8255/banner.jpg 1920w","sizes":"(max-width: 720px) 100vw, 720px"}}},"keywords":["技巧","最佳实践","协作"]}}},{"node":{"excerpt":"…","id":"46ac0c14-f014-58c0-a63a-1ff4d65a3662","fields":{"title":"🎁 import 还是 require","slug":"/blog/import-or-require","date":"2019-09-03","datetime":"2019-09-03 16:34:10","description":"webpack、node.js、ES5 的模块引用是不一样的，本文了解一下模块化的一些东西，重点说明不同的代码组织方式。","categories":["code"],"keywords":["整理","思考","模块","import","require","CMD","AMD","Webpack","ES5","ES6"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🎁 import 还是 require","date":"2019-09-03 16:34:10","description":"webpack、node.js、ES5 的模块引用是不一样的，本文了解一下模块化的一些东西，重点说明不同的代码组织方式。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAIE/8QAFgEBAQEAAAAAAAAAAAAAAAAAAQID/9oADAMBAAIQAxAAAAHFRW8hf//EABYQAAMAAAAAAAAAAAAAAAAAAAEQQf/aAAgBAQABBQKlf//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABQQAQAAAAAAAAAAAAAAAAAAABD/2gAIAQEABj8Cf//EABgQAQADAQAAAAAAAAAAAAAAAAEAEBEh/9oACAEBAAE/ISMrwyv/2gAMAwEAAgADAAAAEIwP/8QAFREBAQAAAAAAAAAAAAAAAAAAEEH/2gAIAQMBAT8Qp//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABoQAQACAwEAAAAAAAAAAAAAAAERUQAQMcH/2gAIAQEAAT8QcBSSsQOCo8Nf/9k=","aspectRatio":4.390243902439025,"src":"/static/d432bed0d654bf430d905eac915ebeb9/7d509/banner.jpg","srcSet":"/static/d432bed0d654bf430d905eac915ebeb9/8d052/banner.jpg 180w,\n/static/d432bed0d654bf430d905eac915ebeb9/e2788/banner.jpg 360w,\n/static/d432bed0d654bf430d905eac915ebeb9/7d509/banner.jpg 720w,\n/static/d432bed0d654bf430d905eac915ebeb9/9842e/banner.jpg 900w","sizes":"(max-width: 720px) 100vw, 720px"}}},"keywords":["整理","思考","模块","import","require","CMD","AMD","Webpack","ES5","ES6"]}}},{"node":{"excerpt":"1. TwoPointers…","id":"26f07395-f176-5978-9139-f08844fcb717","fields":{"title":"😜 算法双指针","slug":"/blog/two-pointers","date":"2019-08-25","datetime":"2019-08-25 21:34:51","description":"算法中又一个比较常见的双指针方法，这篇文章来思考下那些场景用的比较多。","categories":["algorithm"],"keywords":["算法","技巧"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"😜 算法双指针","date":"2019-08-25 21:34:51","description":"算法中又一个比较常见的双指针方法，这篇文章来思考下那些场景用的比较多。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAABYlAAAWJQFJUiTwAAABXUlEQVQY022QPUvDUBSG80s6dOlH0qZNtKltVdQ6WCladFF/gS4K1cVBHISCiJNOFQfR1UUoUkH3gouTVBH8mPxEHNq0SR57oxEFDxy493LO8773lYzBCVJDBTLZMTKDOVL9w/RkBtC7E6iyQiikIms6iS6deDxOLBZDVVWi0SiKoiDLMuFwuDMXIhAIII3PzNE7MkUsPYqSGEJLZdGMPgqT08ytrLKxMc/h+hpntQsWl5YIBoPouv4DjUQiLtiDSo1Gk8urG46OT9nc2mF2YZn0QI7N7V3O2w7vHzW4v+YN2Ns/cJcNw0DTtB+3HlS4lfinXl7fuL17gLaNZYPpOO57tXqCz+dzFwVEAAVYROFFIDmdYdu2aVsWVqed72VRDbOFaZqYzU63LR6fnimXyxSLRfL5PMlk0s3N7/e73xVQF+hBvPNfEfvr/ktIVKvVol6vU6lUKJVKroBw/Qn5yzlUBQQf/QAAAABJRU5ErkJggg==","aspectRatio":3.272727272727273,"src":"/static/0d7f418b3c19133c09153f86cf17c6e4/3c17d/banner.png","srcSet":"/static/0d7f418b3c19133c09153f86cf17c6e4/e0491/banner.png 180w,\n/static/0d7f418b3c19133c09153f86cf17c6e4/f4094/banner.png 360w,\n/static/0d7f418b3c19133c09153f86cf17c6e4/3c17d/banner.png 720w,\n/static/0d7f418b3c19133c09153f86cf17c6e4/05d05/banner.png 1080w,\n/static/0d7f418b3c19133c09153f86cf17c6e4/3bf79/banner.png 1440w,\n/static/0d7f418b3c19133c09153f86cf17c6e4/4a17a/banner.png 1831w","sizes":"(max-width: 720px) 100vw, 720px"}}},"keywords":["算法","技巧"]}}},{"node":{"excerpt":"很常见的一个 Leet-Code 问题，取出无序数组的最大 K 个数，比如【前-k-个高频元素】【数组中的第k个最大元素】。 下面以【前-k-个高频元素】为例写下思考： 方法一：排序截取 最容易想到的一个方法，选最大的，那就从大到小排序后截取前 K 个呗。 这个算法的复杂度主要是排序部分，快排的话平均可以有 O(nlog 2 n)，加上截取部分的复杂度  O(K…","id":"c8edcf69-a06c-5fab-916c-1d731666d42d","fields":{"title":"😋 最大的 K 元素","slug":"/blog/bigger-k","date":"2019-08-21","datetime":"2019-08-21 19:54:09","description":"Leet-Code 中常见的一个技巧。","categories":["algorithm"],"keywords":["算法","leet-code"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"😋 最大的 K 元素","date":"2019-08-21 19:54:09","description":"Leet-Code 中常见的一个技巧。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAABYlAAAWJQFJUiTwAAABXUlEQVQY022QPUvDUBSG80s6dOlH0qZNtKltVdQ6WCladFF/gS4K1cVBHISCiJNOFQfR1UUoUkH3gouTVBH8mPxEHNq0SR57oxEFDxy493LO8773lYzBCVJDBTLZMTKDOVL9w/RkBtC7E6iyQiikIms6iS6deDxOLBZDVVWi0SiKoiDLMuFwuDMXIhAIII3PzNE7MkUsPYqSGEJLZdGMPgqT08ytrLKxMc/h+hpntQsWl5YIBoPouv4DjUQiLtiDSo1Gk8urG46OT9nc2mF2YZn0QI7N7V3O2w7vHzW4v+YN2Ns/cJcNw0DTtB+3HlS4lfinXl7fuL17gLaNZYPpOO57tXqCz+dzFwVEAAVYROFFIDmdYdu2aVsWVqed72VRDbOFaZqYzU63LR6fnimXyxSLRfL5PMlk0s3N7/e73xVQF+hBvPNfEfvr/ktIVKvVol6vU6lUKJVKroBw/Qn5yzlUBQQf/QAAAABJRU5ErkJggg==","aspectRatio":3.272727272727273,"src":"/static/0d7f418b3c19133c09153f86cf17c6e4/3c17d/banner.png","srcSet":"/static/0d7f418b3c19133c09153f86cf17c6e4/e0491/banner.png 180w,\n/static/0d7f418b3c19133c09153f86cf17c6e4/f4094/banner.png 360w,\n/static/0d7f418b3c19133c09153f86cf17c6e4/3c17d/banner.png 720w,\n/static/0d7f418b3c19133c09153f86cf17c6e4/05d05/banner.png 1080w,\n/static/0d7f418b3c19133c09153f86cf17c6e4/3bf79/banner.png 1440w,\n/static/0d7f418b3c19133c09153f86cf17c6e4/4a17a/banner.png 1831w","sizes":"(max-width: 720px) 100vw, 720px"}}},"keywords":["算法","leet-code"]}}},{"node":{"excerpt":"想分享的是一次哭笑不得的 debug 寻找记~，不是最傻的一次调试精力，但是找到问题最想摔键盘的一次，必须复盘下~~ 记录一次最失败的 debug 过程。 国庆…","id":"9c5b629b-1387-5654-b2be-34e0dd1a86cb","fields":{"title":"🐛 记录一次最失败的 debug 过程","slug":"/blog/worst-debug","date":"2019-08-13","datetime":"2019-08-13 12:04:51","description":"出现 bug 非常正常，但是 Debug 的过程中切忌浮躁、自以为是、胡乱猜测，其实你以为的并不对，反而让你一次一次的忽视简单的问题线索。","categories":["code"],"keywords":["思考","调试"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🐛 记录一次最失败的 debug 过程","date":"2019-08-13 12:04:51","description":"出现 bug 非常正常，但是 Debug 的过程中切忌浮躁、自以为是、胡乱猜测，其实你以为的并不对，反而让你一次一次的忽视简单的问题线索。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAID/8QAFgEBAQEAAAAAAAAAAAAAAAAAAQAC/9oADAMBAAIQAxAAAAGMCxYH/8QAGBAAAwEBAAAAAAAAAAAAAAAAAAECAxL/2gAIAQEAAQUCeto7pk6Ul//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABcQAAMBAAAAAAAAAAAAAAAAAAABITL/2gAIAQEABj8C0VkZ/8QAGBAAAwEBAAAAAAAAAAAAAAAAAAEhETH/2gAIAQEAAT8h5TDs0KRSP//aAAwDAQACAAMAAAAQDD//xAAVEQEBAAAAAAAAAAAAAAAAAAAAAf/aAAgBAwEBPxBa/8QAFhEBAQEAAAAAAAAAAAAAAAAAAQAR/9oACAECAQE/ECAy/8QAGBABAQEBAQAAAAAAAAAAAAAAAREAITH/2gAIAQEAAT8QcDxY2p29dEpuwd//2Q==","aspectRatio":3.8297872340425534,"src":"/static/682eb074669535f65148587fab97baa0/7d509/banner.jpg","srcSet":"/static/682eb074669535f65148587fab97baa0/8d052/banner.jpg 180w,\n/static/682eb074669535f65148587fab97baa0/e2788/banner.jpg 360w,\n/static/682eb074669535f65148587fab97baa0/7d509/banner.jpg 720w,\n/static/682eb074669535f65148587fab97baa0/10d63/banner.jpg 1080w,\n/static/682eb074669535f65148587fab97baa0/ec6c5/banner.jpg 1280w","sizes":"(max-width: 720px) 100vw, 720px"}}},"keywords":["思考","调试"]}}},{"node":{"excerpt":"…","id":"7f370fe4-e1be-5535-b85e-e6de888af8db","fields":{"title":"🖐 编程新手问题","slug":"/blog/coding-badcase","date":"2019-08-06","datetime":"2019-08-06 19:14:03","description":"带了一些实习生之后发现编程初学者和老鸟的区别，很多时候经验真的是很重要，在此记录下这些不同","categories":["code"],"keywords":["思考","协作","skills"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🖐 编程新手问题","date":"2019-08-06 19:14:03","description":"带了一些实习生之后发现编程初学者和老鸟的区别，很多时候经验真的是很重要，在此记录下这些不同","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAIAAADKYVtkAAAACXBIWXMAAAsTAAALEwEAmpwYAAAApklEQVQY02NYrOGOhhYqOy9SdV2o6rJIzQ3EVXEBokUqzpgqGdD4i9RcD2Q3Hspv3hlTcqiwbWtw9t60mgPZDUfLuxZr4tes6bFQxfnCpEVX56/Zk1J1pKzzbPfsi1MWX5y8+Pqi9Ut1vSFuwWkzEK0wCVxtHb7WMWaNfdRGj6T1rgmrLEJXmAYRdjbI5SouQCesNA9ZaREK1LbKMmyJpvsiVRdMlQBKcHiByyLIdgAAAABJRU5ErkJggg==","aspectRatio":3.8297872340425534,"src":"/static/0ce7448fa1bdb466c91825cc26f6adbd/3c17d/banner.png","srcSet":"/static/0ce7448fa1bdb466c91825cc26f6adbd/e0491/banner.png 180w,\n/static/0ce7448fa1bdb466c91825cc26f6adbd/f4094/banner.png 360w,\n/static/0ce7448fa1bdb466c91825cc26f6adbd/3c17d/banner.png 720w,\n/static/0ce7448fa1bdb466c91825cc26f6adbd/31987/banner.png 1000w","sizes":"(max-width: 720px) 100vw, 720px"}}},"keywords":["思考","协作","skills"]}}},{"node":{"excerpt":"1. Reduce js 中一般很少用（至少之前我很少用到）的一个内置函数。 reduce 在数组上带有一个迭代值的遍历。接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，数组本身。 语法: 用法 最简单的应用就是累加： 自带一个可以初始化的迭代值，所以不需要循环、不需要单独创建变量，所以代码非常简洁。类似的需要一个初始值的遍历，用 reduce…","id":"d85a0347-888c-58eb-96ed-ef8d8c22d1e4","fields":{"title":"😄 reduce 函数","slug":"/blog/reduce","date":"2019-07-31","datetime":"2019-07-31 21:09:13","description":"js 中一般很少用（至少之前我很少用到）的一个内置函数，趁着有时间深入了解下。","categories":["algorithm"],"keywords":["功能","技巧"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"😄 reduce 函数","date":"2019-07-31 21:09:13","description":"js 中一般很少用（至少之前我很少用到）的一个内置函数，趁着有时间深入了解下。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAABYlAAAWJQFJUiTwAAABXUlEQVQY022QPUvDUBSG80s6dOlH0qZNtKltVdQ6WCladFF/gS4K1cVBHISCiJNOFQfR1UUoUkH3gouTVBH8mPxEHNq0SR57oxEFDxy493LO8773lYzBCVJDBTLZMTKDOVL9w/RkBtC7E6iyQiikIms6iS6deDxOLBZDVVWi0SiKoiDLMuFwuDMXIhAIII3PzNE7MkUsPYqSGEJLZdGMPgqT08ytrLKxMc/h+hpntQsWl5YIBoPouv4DjUQiLtiDSo1Gk8urG46OT9nc2mF2YZn0QI7N7V3O2w7vHzW4v+YN2Ns/cJcNw0DTtB+3HlS4lfinXl7fuL17gLaNZYPpOO57tXqCz+dzFwVEAAVYROFFIDmdYdu2aVsWVqed72VRDbOFaZqYzU63LR6fnimXyxSLRfL5PMlk0s3N7/e73xVQF+hBvPNfEfvr/ktIVKvVol6vU6lUKJVKroBw/Qn5yzlUBQQf/QAAAABJRU5ErkJggg==","aspectRatio":3.272727272727273,"src":"/static/0d7f418b3c19133c09153f86cf17c6e4/3c17d/banner.png","srcSet":"/static/0d7f418b3c19133c09153f86cf17c6e4/e0491/banner.png 180w,\n/static/0d7f418b3c19133c09153f86cf17c6e4/f4094/banner.png 360w,\n/static/0d7f418b3c19133c09153f86cf17c6e4/3c17d/banner.png 720w,\n/static/0d7f418b3c19133c09153f86cf17c6e4/05d05/banner.png 1080w,\n/static/0d7f418b3c19133c09153f86cf17c6e4/3bf79/banner.png 1440w,\n/static/0d7f418b3c19133c09153f86cf17c6e4/4a17a/banner.png 1831w","sizes":"(max-width: 720px) 100vw, 720px"}}},"keywords":["功能","技巧"]}}},{"node":{"excerpt":"这个计划其实在几个月之前就已经准备了，但是拖延症严重啊，现在才正式准备来完成这个任务。 00、缘由 工作从来不是轻松的，尤其是前端，技术上大爆炸式的发展更是让人目不暇接...... 更确切的是学不过来了。让人不由得： 从前的时光很慢。慢的，一生只够学一个 JQuery。现在嫌弃时间太慢，视频教程都要…","id":"5b2bce45-2a01-5dbc-88b9-1cfe14498542","fields":{"title":"🚢 前端进阶之路启程 ","slug":"/blog/one-piece","date":"2019-07-21","datetime":"2019-07-21 11:24:36","description":"虽然不间断的学习，项目中也会用到接触到新技术，但是仍然觉得自己差的很多，特别的焦虑。可能很多人也会有这个阶段，焦虑，有想法，愿意努力，但是不得要领。","categories":["think"],"keywords":["思考","闲聊"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🚢 前端进阶之路启程 ","date":"2019-07-21 11:24:36","description":"虽然不间断的学习，项目中也会用到接触到新技术，但是仍然觉得自己差的很多，特别的焦虑。可能很多人也会有这个阶段，焦虑，有想法，愿意努力，但是不得要领。","banner":{"childImageSharp":{"sizes":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAT/xAAVAQEBAAAAAAAAAAAAAAAAAAABBP/aAAwDAQACEAMQAAABqoJmEJ//xAAZEAEAAgMAAAAAAAAAAAAAAAABAAMCESH/2gAIAQEAAQUCxrI9Gs3/AP/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAgBAgEBPwFtf//EABYQAAMAAAAAAAAAAAAAAAAAAAAQEf/aAAgBAQAGPwIi/8QAGBABAQEBAQAAAAAAAAAAAAAAAQARITH/2gAIAQEAAT8h2icyHswiT//aAAwDAQACAAMAAAAQeB//xAAXEQADAQAAAAAAAAAAAAAAAAAAAREh/9oACAEDAQE/EEsIf//EABYRAQEBAAAAAAAAAAAAAAAAAAEAYf/aAAgBAgEBPxBVtr//xAAYEAEBAQEBAAAAAAAAAAAAAAABEQAhcf/aAAgBAQABPxBgVLkzJQeQzMG+m//Z","aspectRatio":4.390243902439025,"src":"/static/a0a9b6c2d71bc1b167824a17c016c73e/7d509/banner.jpg","srcSet":"/static/a0a9b6c2d71bc1b167824a17c016c73e/8d052/banner.jpg 180w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/e2788/banner.jpg 360w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/7d509/banner.jpg 720w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/10d63/banner.jpg 1080w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/7f945/banner.jpg 1440w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/d8255/banner.jpg 1920w","sizes":"(max-width: 720px) 100vw, 720px"}}},"keywords":["思考","闲聊"]}}},{"node":{"excerpt":"…","id":"90149f43-5db9-5325-9be4-3f7639073adf","fields":{"title":"🌞 不要错过外面美妙的阳光~~","slug":"/blog/to-myself","date":"2019-02-16","datetime":"2019-02-16 10:17:10","description":"写给自己的初心、放下手机，吹吹外面世界真实的风~~","categories":["think"],"keywords":["初心","美好"]},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🌞 不要错过外面美妙的阳光~~","date":"2019-02-16 10:17:10","description":"写给自己的初心、放下手机，吹吹外面世界真实的风~~","banner":null,"keywords":["初心","美好"]}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":true}}}